Clase 4 | HTML5 | Etiquetas semánticas |

En la Teórica vimos:                                                                                              

  • HTML5: etiquetas semánticas:

Qué son etiquetas semánticas

Semántica: Perteneciente o relativo a la significación de las palabras.  Este tipo de etiquetas del lenguaje HTML son aquellas que dan un significado a las partes del documento.

Las etiquetas semánticas indican qué es el contenido que contienen, en lugar de cómo se debe formatear al mostrar el documento HTML. Estas  etiquetas, tienen importancia en el marco del HTML y de la composición de un documento web para ayudar a los motores de búsqueda como Google a indexar más correctamente los contenidos de un sitio.

Dentro del etiquetado semántico también tenemos varias funciones, pero las principales y elementales son las que sirven para definir el esquema principal del documento, como HEADER, ARTICLE, FOOTER, etc.  Generalmente, en cualquier documento tenemos una cabecera, un cuerpo y un pie de página, elementos que definen la estructura. Todas esas etiquetas semánticas nos indican qué es el contenido que engloban y cuál es su relación con el conjunto de elementos del documento HTML.

  • header. La cabecera de una web, ojo, no confundir con la etiqueta head.
  • nav. establece un apartado con enlaces de la página, por ejemplo, un menú.
  • main. Expresa el contenido principal de un documento.
  • section. Define una sección de un documento.
  • article. Indica que el contenido encerrado dentro de las etiquetas es un artículo.
  • aside. El contenido lateral de una página.
  • footer. hace referencia al pie de una página o sección.

Las etiquetas semánticas no tienen un estilo predeterminado que el navegador nos vaya a asignar. Es decir, porque HEADER signifique que es una cabecera, el navegador no va en ningún caso a posicionar el elemento en la parte de arriba del documento. Lo mismo con FOOTER, que no lo colocará en la parte de abajo, o ASIDE al lateral.

Nosotros mediante CSS, debemos asignar los estilos que queramos se aplique a cada uno de esos elementos del documento HTML.

También vimos:

  • ul de “unordered list” –lista no ordenada . crea una lista no ordenada. Sus etiquetas son: <ul> y </ul> (ambas obligatorias). Está definido como: Elemento para listas. Crea una caja: En bloque. Puede contener: Uno o más elementos li.
  • li del ingles item list o elemento de lista declara cada uno de los elementos de una lista. Sus etiquetas son: <li> y </li>. Crea una caja: en bloque. Puede contener: cero o más elementos en bloque o en en linea.
  • a  Crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL.  Ejemplo:   <a href="http://www.catedraocampo.com.ar">DGPC </a>