Primero te quiero enseñar un código HTML5 completo para luego analizar las partes y poder entenderlo.
Ejemplo de código HTML5 de una página sencilla
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <!DOCTYPE html><html lang="es"> <head> <title>Título de la WEB</title> <meta charset="UTF-8"> <meta name="title" content="Título de la WEB"> <meta name="description" content="Descripción de la WEB"> </head> <body> <header> <h1>Título de la WEB</h1> </header> <nav> </nav> <section> <article> <h2>CONTENIDO PRINCIPAL</h2> <p>Este es el contenido principal de mi web</p> <div> <p>Aquí tenéis una imagen.</p> </div> </article> </section> <aside> <h3>Banner de publicidad</h3> </a> <h3>Testimonios</h3> <p>Me gusta mucho esta página.</p> </aside> <footer> <h4>Avisos legales</h4> <h4>Redes sociales</h4> </footer> </body> </html> |
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
|
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
|
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
| <h1>Título de la WEB</h1><h2>CONTENIDO PRINCIPAL</h2><h3>Testimonios</h3><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
|
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
