Etiquetas html5

Home » Blog » Etiquetas html5

Aunque las nuevas etiquetas de HTML5 ya están con nosotros hace unos añitos, voy a realizar un breve repaso a las mismas, explicando para que sirven y cuando deberíamos usarlas.

Esta evolución pretende convertir la web en más semántica, más lógica y sencilla de entenderno solo para los humanos sino para los robots de los motores de búsqueda, con lo que aprender su correcto funcionamiento se antoja clave si queremos tener un código de calidad.

Etiquetas HTML5 estructurales

Estas etiquetas se crearon para poder crear un código más organizado y evitar los DIVs como única solución. Sirven para organizar la estructura general de cada página.

  • ARTICLE: Está destinada para diferenciar los diferentes artículos o segmentos de información.
<article>
  <h1>Artículo 1</h1>
  <p>Este es un artículo de ejemplo...</p>
</article>
  • SECTION: Se usa si se necesita agrupar un bloque de textos, relacionados entre si y de la misma naturaleza.
<section>
  <h1>Diseño Web</h1>
  <p>Nos dedicamos al diseño web y al desarrollo....</p>
</section>
  • HEADER: Identifica la cabecera del sitio web. También puede usarse para identificar diferentes cabeceras de secciones relevantes.
<article>
  <header>
  <h1>Artículo 1</h1>
  <h2>subtitulo</h2>
  </header>
  <p>Este es un artículo de ejemplo...</p>
</article>
  • FOOTER: Identifica el pie de página o también puede usarse para informaciones que formen el pie de una sección.
<footer>
  <p>Copyright 2016</p>
  <p><a href="#">Site map</a> | <a href="#">Contacto</a>.</p>
</footer>
  • ASIDE: Se usa para etiquetar información complementaria, como por ejemplo el lateral de un blog, en donde se sitúan los últimos artículos, categorías, etc. Información no relacionada directamente con el artículo.
<aside>
  <p>Datos de contacto</p>
  <p>[email protected] | 663470924.</p>
</aside>
  • NAV: Se usa para identificar el navegador principal de una página web.
<nav>
  <a href="#">Diseño Web</a> |
  <a href="#">Desarrollo Web</a> |
  <a href="#">Marketing Online</a>
</nav>

Todas estas etiquetas no dan formato, solo sirven para identificar el bloque que engloban.

Etiquetas HTML5 para clasificar el contenido

Estas etiquetas sirven para clasificar el contenido dentro de cada página, es importante, por que de esta forma facilitaremos a los buscadores la identificación de los elementos claves de la página.

  • MENU: Sirve para listar un menú.
<menu type="toolbar">
    <li>Diseño Web</li>
    <li>Programación Web</li>
    <li>Desarrollo PHP</li>
</menu>
  • DETAILS: Detalles o información de un producto por ejemplo. Automáticamente hace el efecto de expandir.
  • SUMMARY: Es un resumen. Suele usarse justo antes de Details.
<details>
  <summary>Cuentas año 2015.</summary>
  <p> - Primer trimestre X</p>
  <p>Durante el primer trimestre se a obtenido...</p>
</details>
  • FIGURE: Sirve para identificar, imágenes, fotos, etc.
  • FIGCAPTION: Es el texto que acompaña, normalmente debajo, una imagen.
<figure>  
<img src="imagen.jpg" alt="TExto alternativo">
<figcaption>Texto de la imagen.</figcaption>
</figure>
  • HGROUP: Sirve para agrupar diferentes encabezados (h1, h2, etc.) y dar a entender que están relacionados entre si. Es interesante si tenemos varios h1 con sus correspondiente h2, poder agruparlos y que quede claro las relaciones del contenido.
<header>
   <hgroup><h1>Titular 1</h1><h2>Subtitulo noticia 1</h2></hgroup>
</header>

<header>
   <hgroup><h1>Titular 2</h1><h2>Subtitulo noticia 2</h2></hgroup> 
</header>
  • MARK: Sirve para destacar un contenido.
<p>Si queremos poner un enlace usaremos la etiqueta <mark>a</mark>.</p>

Etiquetas HTML5 para formularios

Los elementos que mayor evolución han sufrido han sido los formularios, ya que ahora no solo se han mejorado las etiquetas:

  • METER: Sirve para insertar escalas, por ejemplo: Si ponemos 20 de 100, veremos una barra de navegación con un 20%..
<meter value="20" min="0" max="100">20 / 100</meter>
  • PROGRESS: Sirve para poner barras de progreso.
<progress value="20" max="100"></progress>
  • DATALIST: Podemos crear campos de auto-completar.
<input list="buscador">
<datalist id="buscador">
<option value="Perrod">
<option value="Gatos">
<option value="Caballos">
<option value="Conejos">
<option value="Vacas">
<option value="Cerdos">
<option value="Cebras">
</datalist>

Etiquetas HTML5 para Multimedia

Antes del HTML 5 era muy complejo insertar un vídeo, ya que existen muchos formatos diferentes, ahora disponemos de etiquetas multimedia que facilitan este trabajo.

  • AUDIO: Con esta etiqueta podemos introducir y reproducir un fichero de audio.
<audio controls>
  <source src="audio1.mp3" type="audio/mpeg">
  <source src="audio2.mp3" type="audio/mpeg">
  Actualiza tu navegador. No soporta HTML5.
</audio>
  • VIDEO: Permite insertar y reproducir archivos de formato vídeo.
  • SOURCE: Permite especificar varios vídeos o audios.
<video controls>
  <source src="video1.mp4" type="video/mp4">
  <source src="video2.mp4" type="video/mp4">
  Actualiza tu navegador. No soporta HTML5.
</video>
  • EMBED: Para embeber contenido externo. Por ejemplo, para poner en nuestra web el tiempo de la última semana, podemos llamar a un servicio que nos de esa información e introducirlo en nuestra web.
<embed src="flash.swf">
  • TRACK: Permite especificar pistas para vídeos o audios.
<audio controls>
  <source src="video1.ogg" type="audio/ogg">
  <source src="video2.mp3" type="audio/mpeg">
  <track src="video_en.vtt" kind="subtitulos" srclang="en" label="Ingles">
  <track src="video_es.vtt" kind="subtitulos" srclang="es" label="Español">
  Su navegador no soporta videos de HTML5.
</audio>


Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023