El elemento artículo de HTML es un elemento semántico , similar a y . Introducido en HTML5 , se usa comúnmente para contener información que puede distribuirse independientemente del resto del sitio o aplicación en la que aparece.<section><header>
Características y uso
El elemento representa una composición completa en una página web o aplicación web que se puede distribuir o reutilizar de forma independiente, por ejemplo, en sindicación. Esto podría ser una publicación en un foro, un artículo de revista o periódico, una entrada de blog, un comentario enviado por un usuario, un widget o gadget interactivo, o cualquier otro elemento de contenido independiente. [ 1 ]<article>
Ejemplos
En su forma más básica, se puede utilizar para encapsular un cuerpo de texto y un título correspondiente de la siguiente manera:<article>
<article> <h2> Insertar título aquí </h2> <p> Insertar un párrafo de texto aquí </p> </article>Las entradas y los comentarios en los foros suelen implementarse mediante etiquetas anidadas:<article>
<article> <header> <h1> Título de la entrada </h1> <p> Información del encabezado </p> </header> <p> Contenido de la entrada ... </p> <article> <header> <h2> Autor : John Smith </h2> <p> Información del comentario </p> </header> <p> Texto del comentario ... </p> </article> <article> <header> <h2> Autor : Jane Johnson </h2> <p> Información del segundo comentario </p> </header> <p> Texto del comentario ... </p> </article> </article>Atributos
El elemento solo incluye los atributos HTML globales como contenteditable , id y title. [ 2 ] Sin embargo, pubdate , un atributo booleano opcional del elemento, se usa a menudo junto con . Si está presente, indica que el elemento es la fecha en que se publicó. Tenga en cuenta que pubdate se aplica solo al elemento padre o al documento en su conjunto. [ 3 ]<article><time><article><time><article><article>
Comparación con < sección >
HTML5 introdujo tanto como ; ambas son etiquetas semánticas que definen secciones en un documento, como capítulos, encabezados y pies de página. [ 4 ] El elemento es efectivamente un tipo especializado de y tiene un significado más específico, refiriéndose a un bloque independiente y autocontenido de contenido relacionado. [ 3 ] [ 5 ]<article><section><article><section>
Ejemplos de anidamiento
Para organizar mejor el contenido independiente, las etiquetas se pueden anidar dentro de otras etiquetas:<section><article>
<article> <h2> Nombres de las formas </h2> <p> Hay varios tipos diferentes de formas ... </p> <section> <h4> Triángulos </h4> <p> Aquí hay información sobre los triángulos </p> </section> <section> <h4> Círculos </h4> <p> Estas maravillas con forma de Pi son fascinantes y ... </p> </section> </article>Por el contrario, en ocasiones puede ser apropiado anidar un elemento dentro de otro. Por ejemplo, en una página web que contiene varios artículos sobre temas diversos:<article><section>
<section> <h1> Artículos sobre turismo en París </h1> <article> <h3> La Torre Eiffel </h3> <p> Con más de 30 cm de altura ... </p> </article> <article> <h3> El Louvre </h3> <p> Una visita obligada en el turismo parisino ... </p> </article> </section>Compatibilidad con navegadores
Los siguientes navegadores son compatibles con este elemento: [ 6 ]
- De oficina
- Google Chrome 5.0 y versiones posteriores
- Firefox 4.0 y versiones posteriores
- Internet Explorer 9.0 y versiones posteriores
- Safari 4.1 y versiones posteriores
- Opera 11.1 y versiones superiores
- Móvil
- Android 2.2 y versiones posteriores
- Firefox Mobile (Gecko) 4.0 y versiones posteriores
- Internet Explorer Mobile 9.0 y versiones posteriores
- Safari Mobile 5.0 y versiones posteriores
- Opera Mobile 11.0 y versiones posteriores
Referencias
- ↑ "Elemento de artículo HTML5 - W3C" . W3.org . Consultado el 8 de mayo de 2014 .
- ↑ "El elemento Contenido del artículo" . MDN Web Docs . Consultado el 9 de julio de 2018 .
- 1 2 "El elemento artículo" . html5doctor.com . Consultado el 09-07-2018 .
- ↑ "La etiqueta de sección" . W3Schools . 30 de abril de 2014. Consultado el 8 de mayo de 2014 .
- ↑ "HTML5: ¿Sección o artículo?" . Iandevlin.com . 19 de agosto de 2013 . Consultado el 8 de mayo de 2014 .
- ↑ "¿Puedo usar... Tablas de soporte para HTML5, CSS3, etc." . caniuse.com . Consultado el 09-07-2018 .
Enlaces externos
- HTML5
- etiquetas HTML