Anatomía del código HTML5
– Las partes y su
significado.
DOCTYPE
1 <!DOCTYPE html>
La etiqueta doctype declara el tipo de documento, por lo que esta está
señalando que este es un documento HTML.
HTML
1 <html></html>
Delimita el documento HTML.
Atributo a destacar
LANG
1 <html lang="es"></html>
Indica el lenguaje de contenido del código.
HEAD
1 <head></head>
El elemento head delimita la cabecera del documento, entre sus
etiquetas contiene información como scripts, metadatos, estilos, ubicación
de documentos de estilos, título de la página, etc.
META
1 <meta name="description" content="Descripción de la WEB">
Las meta etiquetas se utilizan para identificar propiedades del documento
como por ejemplo el autor, el título y la descripción que mostrarán los
buscadores, etc.
Usos a destacar
META CHARSET
1 <meta charset="UTF-8">
Establece el tipo de codificación del documento.
META TITLE
1 <meta name="title" content="Título de la WEB">
Contiene el titulo que se mostrará en los buscadores.
META DESCRIPTION
1 <meta name="description" content="Descripción de la WEB">
Es el texto que se muestra bajo el título en los motores de búsqueda.
LINK
1 <link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/
Esta etiqueta contiene un link a una hoja de estilos externa, la cual se
utilizará en este documento.
Atributo a destacar
HREF
Especifica la url donde se localiza la hoja de estilo.
BODY
1 <body></body>
La etiqueta body delimita el cuerpo del documento y contiene todo aquello
que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video,
etc…
HEADER
1 <header></header>
El contenido de esta etiqueta debe ser la cabecera de nuestra página donde
se suele encontrar el título, el logotipo y poco más.
NAV
1 <nav></nav>
Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos
los enlaces internos para movernos entre nuestras diferentes secciones del
sitio web.
A
1 <a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>
Representa un enlace o hipervínculo.
Atributos a destacar.
HREF
Dirección URL hacia la que apunta el enlace.
H1, H2, H3, H4, H5, H6
1 <h1>Título de la WEB</h1>
<h2>CONTENIDO PRINCIPAL</h2>
2
3 <h3>Testimonios</h3>
4 <h4>Avisos legales</h4>
Estas etiquetas establecen los encabezados. Se organizan por niveles
siendo H1 el más importante y H6 el menos importante.
SECTION
1 <section></section>
La etiqueta section engloba una sección de texto, imágenes y otros
elementos que guardan cierta relación entre ellos. Normalmente siempre le
podremos poner un título o encabezado.
ARTICLE
1 <article></article>
La etiqueta article se suele encontrar dentro de una etiqueta section y sirve
para dividir y ordenar los contenidos en su interior.
DIV
1 <div></div>
Otra forma de dividir contenido para posteriormente aplicarle clases y
modificar su estilo.
P
1 <p></p>
Entre las etiquetas P colocaremos un párrafo de texto.
IMG
1 <img src="http://dominio.com/imagen.jpg" alt="paisaje">
Esta etiqueta coloca una imagen en el documento mediante un enlace.
Atributos a destacar.
ALT
Representa el texto alternativo, muy importante para que los bucadores
puedan obtener información de la imagen.
SRC
URL donde se encuentra la imagen.
ASIDE
1 <aside></aside>
Contiene información no vital o que no está estrechamente relacionada con
el contenido principal de la página como podrían ser banners de anuncios,
citas o enlaces externos.
FOOTER
1 <footer></footer>
Aquí encontraríamos el código perteneciente al pie de página, donde se
suelen colocar los enlaces a textos legales, el copyright, et
