HTML 5, sus etiquetas y su explicación

Primero revisemos las etiquetas básicas de HTML. Es importante que primero sepamos que en la web existen dos tipos de elementos los de bloque y los elementos en línea.

 

Elementos en bloque

Los elementos en HTML usualmente son elementos "en bloque" o elementos "en línea". Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que esto significa.

 

Elementos en línea

Los elementos en HTML (lenguaje de marcas de hipertexto - Hypertext Markup Language) usualmente son elementos "en línea" o elementos "en bloque". Un elemento en línea ocupa sólo el espacio delimitado por las etiquetas que definen el elemento en línea.

 

Etiquetas HTML

<div></div>

La etiqueta div. La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico. Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos.

 

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Las cabeceras podrían definirse como títulos y existen niveles de cabecera de 1 al 6.

 

<p></p>

El elemento p (párrafo) es el apropiado para distribuir el texto en párrafos.

 

<ul></ul>

ul de "unordered list" -lista no ordenada . crea una lista no ordenada.


<ul>

<li>Elemento de lista 1</li>

<li>Elemento de lista 2</li>

<li>Elemento de lista 3</li>

</ul>

 

<0l></ol>

El elemento ol (Lista ordenada) crea una lista ordenada.


<ol>

<li>Elemento de lista 1</li>

<li>Elemento de lista 2</li>

<li>Elemento de lista 3</li>

</ol>

 

<li></li>

El elemento li del ingles item list o elemento de lista declara cada uno de los elementos de una lista.

 

<table></table>

El Elemento de Tabla HTML (<table>) representa datos en dos o mas dimensiones.


<table>

<thead>
<tr>
<th>Mes</th>
<th>Ahorros</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Enero</td>
<td>$100</td>
</tr>
<tr>
<td>Febrero</td>
<td>$80</td>
</tr>
</tbody>

</table>

<hr>

El elemento HTML <hr> representa un cambio de tema entre párrafos (por ejemplo, un cambio de escena en una historia, un cambio de tema en una sección). En versiones previas de HTML representaba una línea horizontal. Aún puede ser representada como una línea horizontal en los navegadores visuales, pero ahora es definida en términos semánticos y no tanto en términos representativos. Sólo tiene una etiqueta </hr>

 

Etiquetas HTML5

<section></section>

La etiqueta <section> representa una sección genérica un sitio web. Una sección como lo dice su nombre agrupa elementos relativos a su contenido generalmente con su propio heading.

 

<article></article>

El Elemento article de HTML (<article>) representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la sindicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.

 

<header></header>

El elemento de HTML Header (<header>) representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, pero también otros elementos como un logo, una sección que aglutine secciones de encabezados, una formulario de búsqueda o cosas parecidas.

 

<footer></footer>

El Elemento HTML Footer (<footer>) representa un pie de página para el contenido de sección más cercano o el elemento raíz de sección (p.e, su ancestro mas cercano <article>, <aside>, <nav>, <section>,<blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). Un pie de página típicamente contiene información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.

 

<aside></aside>

El Elemento HTML Aside (<aside>) representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido. Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.

 

<na></nav>

Contiene elementos de navegación.


<nav>

<ul>

<li><a href="DireccionPagina"> Item de Navegación 1 </li>

<li><a href="DireccionPagina"> Item de Navegación 2 </li>

<li><a href="DireccionPagina"> Item de Navegación Etc </li>

</ul>

</nav>

 

<figure></figure>

El elemento HTML <figure> representa contenido independiente, a menudo con un título. Si bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.

 

<figcaption>

El elemento HTML <figcaption> representa un subtítulo ( content ) o leyenda asociada el contenido de the <figure> element al cual está anidado, pudiendo ser colocado como the first o last child de the <figure> element, es importante destacar que the <figcaption> element es opcional

Invítanos una tazita de café

Si te ha gustado esta publicación y quieres ayudarnos puedes donar 1 USD. Así seguiremos creando más y más publicaciones para ti.