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="link del estilo" 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="link domino">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
2
3
4
<h2>Título de la WEB</h2>
<h3>CONTENIDO PRINCIPAL</h3>
<h4>Testimonios</h4>
<h5>Avisos legales</h5>
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="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, etc.
Posible resultado de nuestro código HTML5
Aquí dejo la imagen que muestra el navegador tras asignarle algunos estilos. He añadido las etiquetas para que puedas orientarte bien.
estructura del código html5
