Elementos semánticos
elementos semánticos = elementos con significado
¿Qué son los elementos semánticos?
Un elemento semántico describe claramente lo que significa tanto para el navegador como para el desarrollador.
Ejemplos de elementos no...
<kbd> para entradas del teclado
El elemento <kbd> representa una entrada por parte del usuario, ya sea por teclado o comandos de voz.
See the Pen HTML | 1.30 - Elementos de código - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.
<samp> para...
Layouts
El layout es como se va a visualizar o distribuir el contenido de una web.
See the Pen HTML | 1.28 - Layouts - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.
Elementos HTML para Layouts
HTML nos ofrece varias etiquetas semánticas que definen diferentes...
El elemento <head>
- El elemento <head> es un contenedor de metadatos y se coloca entre la etiqueta <html> y la etiqueta <body>.
- Los metadatos HTML son datos sobre el documento HTML. Los metadatos no son visibles.
- Los metadatos generalmente definen el título del...
Bloques y elementos en línea
Todos los elementos HTML tienen un valor de visualización predeterminado según el tipo de elemento que sea.
Los dos valores de visualización son: block e inline.
Bloques
Un elemento de nivel de bloque siempre comienza en una nueva...
Elemento Picture
Nos permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla.
<picture>
HTML5 introdujo el elemento <picture>
Este elemento contiene elementos <source> y cada uno de estos hace referencia a una imagen diferente. Y el...
Citas y menciones
See the Pen HTML | 1.10 - Citas y menciones - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.
Para citas cortas <q>
La etiqueta <q> define una cita corta.
See the Pen HTML | 1.10 - Citas y menciones - 2 by Francisco Palomares Barrios (...
¿Problemas con los formatos de vídeo?
Youtube hace el trabajo por ti para hacer el video compatible con todos los navegadores.
See the Pen HTML | 3.4 - YouTube - video embeb by Francisco Palomares Barrios (@kikopalomares) on CodePen.
Aquí tienes el ejemplo que realizamos en el vídeo para que lo puedas trastear:
See the Pen CSS | Flexbox - 34 by Francisco Palomares Barrios (@kikopalomares) on CodePen.
Aquí tienes el ejemplo que hacemos en el vídeo:
See the Pen CSS | Flexbox - 33 by Francisco Palomares Barrios (@kikopalomares) on CodePen.
Hoy en día es necesario preparar todos nuestros layout para todas las resoluciones de pantalla, para ello una opción muy buena es combinar la tecnología de flexbox con las medias queries de CSS.
En el vídeo vemos como podemos hacer un menu usando estas...
Elementos hijos
Automáticamente todos los elementos hijos del flex container se convierten en elementos flexibles.
Estos elementos tienen estas propiedades:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
Especifica el orden de los elementos.
See the Pen CSS | Flexbox - 27...
