- Etiqueta
- Atributos de la etiqueta
- Comentarios
- <!-- -->
- Estándar o ninguno
- <!DOCTYPE>
- Estándar o ninguno
- <a>
- href | target | rel | hreflang | media | type
- Atributo Añadido: media
- Atributo cambiado: Target
- <abb>
- Estándar o ninguno
- <acronym>
- Etiqueta Eliminada
- <address>
- Estándar o ninguno
- <applet>
- Etiqueta eliminada
- <area>
- Estándar o ningunos
- <article>
- Atributos globales
- Nueva etiqueta
- <aside>
- Atributos globales
- Nueva etiqueta
- <audio>
- autobuffer | autoplay | controls | loop | src
- Nueva etiqueta
- <b>
- Atributos globales
- Etiqueta cambiada
- <base>
- Estándar o ninguno
- <basefont>
- Etiqueta eliminada
- <bb>
- Estándar o ninguno
- <bdo>
- Estándar o ninguno
- <big>
- Etiqueta eliminada
- <blockquote>
- Estándar o ninguno
- <body>
- Estándar o ninguno
- <br>
- Estándar o ninguno
- <button>
- Estándar o ninguno
- <canvas>
- height | width
- Nueva etiqueta
- <caption>
- Estándar o ninguno
- <center>
- Etiqueta eliminada
- <cite>
- Atributos globales
- Etiqueta cambiada
- <code>
- Estándar o ninguno
- <col>
- Estándar o ninguno
- <colgroup>
- Estándar o ninguno
- <command>
- checked | default | disabled | hidden | icon | label | radiogroup | type
- Nueva etiqueta
- <datagrid>
- Estándar o ninguno
- <datalist>
- Atributos globales
- Nueva etiqueta
- <dd>
- Estándar o ninguno
- <del>
- Estándar o ninguno
- <details>
- pen
- Nueva etiqueta
- <dialog>
- Atributos globales
- Nueva etiqueta
- <dir>
- Etiqueta eliminada
- <div>
- Estándar o ninguno
- <dfn>
- Estándar o ninguno
- <dl>
- Estándar o ninguno
- <dt>
- Estándar o ninguno
- <em>
- Estándar o ninguno
- <embed>
- height | src | type | width
- Nueva etiqueta
- <fieldset>
- Estándar o ninguno
- <figure>
- Atributos globales
- Nueva etiqueta
- <font>
- Etiqueta eliminada
- <footer>
- Atributos globales
- Nueva etiqueta
- <form>
- Estándar o ninguno
- <frame>
- Etiqueta eliminada
- <frameset>
- Etiqueta eliminada
- <h1> ... <h6>
- Estándar o ninguno
- <head>
- Estándar o ninguno
- <header>
- Atributos globales
- Nueva etiqueta
- <hgroup>
- hgroup ha sido eliminada de la especificación HTML5
- <hr>
- Ninguno
- Etiqueta cambiada
- <html>
- Estándar o ninguno
- <i>
- Ninguno
- Etiqueta cambiada
- <iframe>
- Estándar o ninguno
- <img>
- Estándar o ninguno
- <input>
- accept | alt | auto-complete | autofocus | cheked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern | placeholder | readonly | required | size | src | step | type | value | width
- Etiqueta cambiada: Añadidos 13 elementos a type
- <ins>
- Estándar o ninguno
- <isindex>
- Etiqueta eliminada
- <kbd>
- Estándar o ninguno
- <label>
- Estándar o ninguno
- <legend>
- Estándar o ninguno
- <li>
- Estándar o ninguno
- <link>
- Estándar o ninguno
- <mark>
- Atributos globales
- Nueva etiqueta
- <map>
- Estándar o ninguno
- <menu>
- Estándar o ninguno
- <meta>
- Estándar o ninguno
- <meter>
- high | low | max | min | optimum | value
- Nueva etiqueta
- <nav>
- Atributos globales
- Nueva etiqueta
- <noframes>
- Etiqueta eliminada
- <noscript>
- Estándar o ninguno
- <object>
- Estándar o ninguno
- <ol>
- Estándar o ninguno
- <optgroup>
- Estándar o ninguno
- <option>
- Estándar o ninguno
- <output>
- form
- Nueva etiqueta
- <p>
- Estándar o ninguno
- <param>
- Estándar o ninguno
- <pre>
- Estándar o ninguno
- <progress>
- max | value
- Nueva etiqueta
- <q>
- <ruby>
- cite
- Nueva etiqueta
- <rp>
- Atributos globales
- Nueva etiqueta
- <rt>
- Atributos globales
- Nueva etiqueta
- <s>
- Etiqueta eliminada
- <samp>
- Estándar o ninguno
- <script>
- Estándar o ninguno
- <section>
- cite
- Nueva etiqueta
- <select>
- Estándar o ninguno
- <small>
- Atributos globales
- Etiqueta Cambiada
- <source>
- media | src | type
- Nueva etiqueta
- <span>
- Estándar o ninguno
- <strike>
- Etiqueta eliminada
- <strong>
- Estándar o ninguno
- <style>
- Estándar o ninguno
- <sub>
- Estándar o ninguno
- <sup>
- Estándar o ninguno
- <table>
- Estándar o ninguno
- <tbody>
- Estándar o ninguno
- <td>
- Estándar o ninguno
- <textarea>
- Estándar o ninguno
- <tfoot>
- Estándar o ninguno
- <th>
- Estándar o ninguno
- <thead>
- Estándar o ninguno
- <time>
- datetime | pubdate
- Nueva etiqueta
- <title>
- Estándar o ninguno
- <tr>
- Estándar o ninguno
- <tt>
- Etiqueta eliminada
- <u>
- Define texto que debe tener un estilo diferente del texto normal 3
- <ul>
- Estándar o ninguno
- <var>
- Estándar o ninguno
- <video>
- src | poster | autobuffer | autoplay | loop | controls | width | height
- Nueva etiqueta
- <xmp>
- Etiqueta eliminada
Algunas de las más importantes etiquetas introducidas en HTML5 son las que añaden valor semántico y estructural, es decir, indican de forma inequívoca las distintas partes de las que consta un página: cabecera, pie, navegación, ...
<HEADER>
La etiqueta <header> se usa para marcar un grupo de elementos de introducción o de navegación dentro de una sección o documento. Normalmente se usa para incluir los encabezados (<h1>–<h6> o <hgroup>) pero no es obligatorio. También puede contener otras cosas como el índice de una sección, un formulario de búsqueda, logos relevantes, ...
El uso de la etiqueta <header> no está restringido a una por documento, sino que se puede usar una por cada sección del mismo, de esta forma:
<header>
<h1>Título del documento</h1>
<p>Más información</p>
</header>
<article>
<header>
<h1>Título del artículo</h1>
<p>Autor del artículo</p>
</header>
<p>Texto del artículo</p>
</article>
Podemos ver además en el ejemplo que en HTML5 el uso de múltiples <h1> es válido.
Una cosa a tener en cuenta es que la etiqueta <header> se usa para marcar un grupo de elementos; es decir, si sólo tenemos un elemento no es necesario usar esta etiqueta. Por ejemplo, en este código no sería necesario:
<article>
<header>
<h1>Título del artículo</h1>
</header>
<p>Texto del artículo</p>
</article>
Sería más correcto de esta forma:
<article>
<h1>Título del artículo</h1>
<p>Texto del artículo</p>
</article>
<HGROUP>
La etiqueta <hgroup> se usa para agrupar un conjunto de uno o más elementos de encabezado (<h1>–<h6>).
El uso más típico de esta etiqueta es para agrupar el título de la página con su eslogan. Antes de HTML5 lo más típico era que este tipo de estructura se marcase así:
<div id="header">
<h1>Nombre de la empresa</h1>
<p>Eslogan de la empresa</p>
</div>
<div id="content">
<h2>Noticia 1</h2>
<p>Desarrollo de la noticia 1</p>
<h2>Noticia 2</h2>
<p>Desarrollo de la noticia 2</p>
</div>
Este tipo de estructura dejaba el eslogan al nivel de cualquier otro texto de la web, cuando es evidente que es un texto más importante. Marcarlo con un <h2> no era correcto ya que crearía una nueva sección que en realidad no existe. Con HTML5 podemos usar <hgroup> para darle la importancia que realmente tiene, asociándolo al título:
<hgroup>
<h1>Nombre de la empresa</h1>
<h2>Eslogan de la empresa</h2>
</hgroup>
<NAV>
La etiqueta <nav> se usa para marcar una sección del documento cuya función es la navegación por la página web.
Esta etiqueta no debe ser usada para marcar todos los grupos de enlaces, únicamente los bloques principales de navegación por la página. Por ejemplo, los típicos enlaces que hay en el pie de página no se deben marcar con <nav>.
<ARTICLE>
La etiqueta <article> se usa para marcar contenido independiente que tendría sentido fuera del contexto de la página actual y que podría sindicarse, por ejemplo: una noticia, un artículo en un blog o un comentario.
Normalmente un <article> tendrá, además de su propio contenido, también una cabecera (a menudo con<header>) y posiblemente un pie (<footer>).
<SECTION>
La etiqueta <section> se usa para marcar una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática del contenido, típicamente con un encabezado.
Ejemplos de uso de <section> podrían ser: capítulos, las pestañas en un menú tabulado o, en la página principal de un sitio web, la introducción, lista de noticias e información de contacto. Sólo se debería usar <section> para contenido independiente al que se podría poner un encabezado y que no sea susceptible de ir marcado con<article>, <aside> o <nav>.
Existe cierta confusión sobre cuándo usar <article> y cuándo <section> ya que ambos se parecen bastante. En general, se debe usar <article> cuando el contenido sea susceptible de ser sindicado (por ejemplo en unas RSS). Un ejemplo de uso de las dos etiquetas podría ser en la página principal de una web con un listado de noticias, de esta forma:
<h1>Título de la página</h1>
<section id="news-list">
<h2>Noticias</h2>
<article>
<h3>Noticia 1</h3>
<p>Desarrollo de la noticia 1</p>
</article>
<article>
<h3>Noticia 2</h3>
<p>Desarrollo de la noticia 2</p>
</article>
</section>
<ASIDE>
La etiqueta <aside> se usa para marcar un trozo de contenido que está relacionado con el contenido de la página web, pero que no es parte del mismo. Ejemplos de uso serían: glosario de términos, grupos de enlaces a páginas relacionadas, barras laterales, ...
<FOOTER>
La etiqueta <footer> se usa para marcar el pie de una sección o documento y que contiene información sobre el mismo como el autor, licencia, términos de uso, ...
No hay comentarios.:
Publicar un comentario