Scribd
Cargar
133 vistas

Anatomía Del Código HTML5

El documento describe las principales etiquetas y atributos de HTML5. Algunas de las etiquetas clave son <DOCTYPE>, <html>, <head>, <title>, <body>, <header>, <nav>, <section>, <article>, <div>, <p>, <img>, <aside> y <footer>, las cuales se utilizan para estructurar el contenido, añadir metadatos, enlaces y otros elementos a una página web.

Cargado por

Lenin Macedo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
133 vistas

Anatomía Del Código HTML5

El documento describe las principales etiquetas y atributos de HTML5. Algunas de las etiquetas clave son <DOCTYPE>, <html>, <head>, <title>, <body>, <header>, <nav>, <section>, <article>, <div>, <p>, <img>, <aside> y <footer>, las cuales se utilizan para estructurar el contenido, añadir metadatos, enlaces y otros elementos a una página web.

Cargado por

Lenin Macedo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

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 título 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
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
<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>

También podría gustarte