Anatomía Del Código HTML5

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
Es el texto que se muestra bajo el título en los motores de búsqueda.
LINK
<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet"
1
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>
2 <h2>CONTENIDO PRINCIPAL</h2>
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.
Para alinear un párrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de la etiqueta <P>. Se
puede alinear de tres formas diferentes:
<p align="left"> Párrafo... </p> Alinea a la izquierda.
<p align="center"> Párrafo... </p> Realiza un centrado.
<p align="right"> Párrafo... </p> Alinea a la derecha.
Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando <BR>.
Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un párrafo de otro
que es <HR>
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 buscadores 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.
Ejemplo de código HTML5 de una página sencilla

1 <!DOCTYPE html>
<html lang="es">
2 <head>
3 <title>Título de la WEB</title>
4 <meta charset="UTF-8">
5 <meta name="title" content="Título de la WEB">
<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/
7 </head>
8 <body>
9 <header>
10 <h1>Título de la WEB</h1>
</header>
11 <nav>
14 </nav>
15 <section>
<article>
16 <h2>CONTENIDO PRINCIPAL</h2>
17 <p>Este es el contenido principal de mi web</p>
18 <div>
19 <p>Aquí tenéis una imagen.</p>
<img src="http://dominio.com/imagen.jpg" alt="paisaje">
20 </div>
21 </article>
22 </section>
23 <aside>
24 <h3>Banner de publicidad</h3>
<a href="http://dominio-externo.com">
25 <img src="http://dominio.com/banner-publicidad.png" alt="banner de publicida
26 </a>
27 <h3>Testimonios</h3>
28 <p>Me gusta mucho esta página.</p>
29 </aside>
<footer>
30 <h4>Avisos legales</h4>
31 <a href="http://dominio.com/aviso-legal">Política de cookies</a>
32 <h4>Redes sociales</h4>
33 <a href="http://facebook.com/mi-pagina-de-facebook">Mi Facebook</a>
</footer>
34 </body>
35 </html>

Anatomía Del Código HTML5

Cargado por

Copyright:

Formatos disponibles

Anatomía Del Código HTML5

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Anatomía Del Código HTML5

Cargado por

Copyright:

Formatos disponibles

Anatomía del código HTML5 – Las partes y su significado.

puede alinear de tres formas diferentes:

<p align="left"> Párrafo... </p> Alinea a la izquierda.

<p align="center"> Párrafo... </p> Realiza un centrado.

<p align="right"> Párrafo... </p> Alinea a la derecha.

Ejemplo de código HTML5 de una página sencilla

También podría gustarte