Conoce las nuevas etiquetas HTML5 que te ayudaran a maquetar mejor

Autor: J. Luis

#HTML

Luego de bastante tiempo de solo usar los famosos div ahora HTML evoluciono y nos brinda nuevas etiquetas desarrolladas para un tipo especial de contenido

Suscríbete a nuestro canal en Youtube

Con la nueva cantidad de etiquetas que se implementaron para mejorar la maquetación web estos últimos años , resulta un dolor de cabeza memorizarlas totalmente todas, por lo cual en este artículo te presentaremos un lista de las más utilizadas y una pequeña descripción que te facilitara al momento de utilizarlas:

Etiqueta	Función
<!–…–>	Define un comentario
<!DOCTYPE>	Define el tipo de docuemento
<a>	Define un hipervínculo
<abbr>	Define una abreviación
<address>	Define la información de contacto del autor / propietario del documento
<area>	Define un área dentro de un mapa de imagen
<article>	Define un artículo
<aside>	Define el contenido lateral del contenedor de una página
<audio>	Define contenido de sonido
<b>	Define texto en negrita
<base>	Especifica la base donde se abrirán todas las URL del documento
<bdi>	Aísla una parte del texto que puede tener un formato diferente del texto externo
<bdo>	Sobreescribe la dirección del texto
<blockquote>	Define una sección que tiene otra fuente
<body>	Define el cuerpo del documento
<br>	Define un salto de línea
<button>	Define un botón clickeable
<canvas>	Se usa para dibujar gráficos en pantalla
<caption>	Define el título de una tabla
<cite>	Define el título de un trabajo
<code>	Define un trozo de código de programación
<col>	Especifica las propiedades de la columna para cada columna del elemento <colgroup>
<colgroup>	Especifica un grupo de una o más columnas de una tabla
<command>	Define un botón command al que un usuario puede invocar
<datalist>	Especifica en un input una lista pre-definida de opciones
<dd>	Define la descripción de un ítem en una lista de definición
<del>	Define un texto que ha sido definido en un Mdocument
<details>	Define detalles adicionales que el usuario puede ver o esconder
<dfn>	Define el término de una definición
<dialog>	Define una caja o ventana de dialogo
<div>	Define una sección en un documento
<dl>	Define una lista de definición
<dt>	Define un término (un ítem) en una lista de definición
<em>	Define énfasis en un texto
<embed>	Define el contenedor de una aplicación externa (no html)
<fieldset>	Grupo de elementos relacionados en un formulario
<figcaption>	Define el título para una figura <figure>
<figure>	Especifica auto-contenido
<footer>	Define el pie de página de un documento
<form>	Define un formulario html
<h1> a <h6>	Define encabezados o títulos
<head>	Define información hacerca del documento
<header>	Define la sección de encabezado del docuemnto
<hgroup>	Grupo de encabezado (<h1> a <6>)
<hr>	Define un cámbio de temática a partir de una línea dibujada
<html>	Define la raíz del documento
<i>	Define una parte del texto de modo alternativo
<iframe>	Define un frame en línea
<img>	Define una imagen
<input>	Define un control de entrada de texto
<ins>	Define texto que ha sido insertado en un documento
<kbd>	Define entrada del teclado
<keygen>	Define un campo generador de claves para formularios
<label>	Define el rótulo para un elemento <input>
<legend>	Define un título para los elementos <fieldset>, <figure>, <details>
<li>	Define un ítem de una lista
<link>	Define la relación entre un documento y un recurso externo (generalmente con hojas de estilo)
<map>	Define un mapa de imagen del cliente
<mark>	Define texto resaltado o marcado
<menu>	Define la lista de un menú
<meta>	Define un metadato de un documento
<meter>	Define una medida escalar en un rango conocido
<nav>	Define un link de navegación
<noscript>	Define un contenido alternativo para los usuarios que no soportan scripts del cliente
<objet>	Define un objeto embebido
<ol>	Define una lista ordenada
<optgroup>	Define un grupo de opciones relacionadas en una lista desplegable
<option>	Define una opción en una lista desplegable
<output>	Define el resultado de un cálculo
<p>	Define un párrafo
<param>	Define un parámetro para un objeto
<pre>	Define texto pre-formateado
<progress>	Representa el progreso de una tarea en una barra
<q>	Define una cita corta
<rp>	Define que debe mostrar en navegadores que no soportan scripts de ruby
<rt>	Define una pronunciación de caracteres
<ruby>	Define una notación de ruby
<s>	Define texto que no es correcto
<samp>	Define un ejemplo de salida de un programa
<script>	Define un script del lado cliente
<section>	Define una sección de un documento
<select>	Define un drop-down list
<small>	Define texto pequeño
<source>	Define los recursos para elementos multimedia
<span>	Define una pequeña sección de un documento
<strong>	Define un texto en negrita
<style>	Define un estilo para la información de un documento
<sub>	Define un texto que es subíndice
<summary>	Define un encabezado visible para el elemento <details>
<sup>	Define un texto que es superíndice
<table>	Define una tabla
<tbody>	Define el cuerpo de una tabla
<td>	Define una celda en una tabla
<textarea>	Define un control de entrada de múltiples líneas
<tfoot>	Agrupa los footer contenidos en una tabla
<th>	Define una celda de encabezado en una tabla
<thead>	Agrupa los encabezados de una tabla
<time>	Define fecha / hora
<title>	Define un título para el documento
<tr>	Define una fila en una tabla
<track>	Define texto de la pista para elementos multimedia (vídeo y audio)
<ul>	Define una lista desordenada
<var>	Define una variable
<video>	Define un vídeo o película
<wbr>	Define un posible salto de linea

Ahora despues de listarte las principales etiquetas , te toca implementarlas en tu sitio web, no te olvides que al usar estas etiquetas le facilitas a google la lectura de tu pagina web para que pueda indexarla correctamente y pueda mejorar en el posicionamiento de busquedas en este .

Leido 5543 veces | 1 usuarios

Código fuente no disponible.

Compartir link del tutorial con tus amigos