2

La cuestión es que hace poco "terminé" de estudiar HTML y me di cuenta de que en muchas ocasiones se utiliza la etiqueta <div>.

Ahora mismo estoy comenzando con CSS y todavía no logro ver la necesidad o la utilidad de usar esta etiqueta, mas bien, utilizo muy seguido <article>. Me gustaría saber si alguien puede darme una explicación un poco mas real o incluso ejemplificada de esta etiqueta, que noto que es importante pero todavía no logro saber para que específicamente.

De hecho quisiera dejar un ejemplo de un index para ver si debería usar un div o no.

<html>
<head>
    <title>Metallica World</title>
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <meta charset="utf-8">
    <meta name="keywords" content="#">
    <meta name="author" content="Julian Urbani">
    <meta name="description" content="#">
</head>
<body>
    <header>
            <a href="index.hmtl">Inicio</a></li>
            <a href="news.html">Novedades</a></li>
            <a href="band.html">Banda</a>
            <a href="#">Historia</a></li>
            <a href="#">Cronologia</a></li>       
            <a href="albums.html">Albums</a></li>
            <a href="media.html">Conciertos y videos</a></li>
            <a href="#social">Redes sociales</a></li> 
    </header>
    <article>
        <section>
            <h1>Bienvenido al mundo de <i>Metallica</i>.</h1>
             <p>En esta página vas a poder encontrar todo lo relacionado al mundo de la banda estadounidense <b>Metallica</b>, sus discos, sus conciertos, las ultimas noticias e incluso algunos datos curiosos que quizás no encuentres en otro lugar! Te recomendamos comenzar por la sección de <a href="#">banda</a> para conocer a fondo la historia de ellos y asi no perderte ningun dato.</p>       
        </section>
    </article>
    <footer>
          <h4 id="social">Redes sociales de la banda</h4>
        <a target="_blank" href="#">Facebook</a>
        <a target="_blank" href="#">Twitter</a>
        <a target="_blank" href="#">Instagram</a>
        <a target="_blank" href="#">Youtube<introducir el código aquí/a>
        
2

2 respuestas 2

4

El <article> crea una sección en tu documento. un <article> es para que ahí coloques contenido que, de ser presentado en otra pagina, siga teniendo sentido y no haya necesidad de que haya otra información afuera de este para que el contenido que contiene sea entendible completamente.

Se usa normalmente para estructurar posts de una pagina o productos.

Un <div> no le da ningún significado al contenido que envuelve, solo se usa para tener una caja extra de manera que puedas agregarle estilos.

<article>
  <h1>Noticia ocurrida en Madrid</p>

  <p>Anoche hubo una noticia que ocurrio en Madrid y fue estrepitosa</p>
</article>

Puedes agarrar esa noticia y distribuirla en otros lugares, por si sola seguiría siendo comprensible sin ayuda de mas información externa a la que esta en la noticia.

<div class="text-bold">
    Paragraph
</div>

Aquí solo quieres estilizar ese texto sin darle un significado ni nada.

Un article aparte del significado que tiene también en el documento en donde se encuentra crea una sección, una sección vendría siendo donde se habla de un subtema del tema principal de la pagina o bien podría ser un subtema de otro subtema, es util para lectores de pantalla que escanean el documento.

2

bueno un <div> es una etiqueta de bloque que define las divisiones lógicas existentes en el contenido de una página en diferencia por ejemplo a <span> que es una etiqueta en línea , aparte <div> es generico no tiene significado semántico a diferencia otras etiquetas como este caso <article>, revisa bien los conceptos de las etiquetas y porque son semánticas y entenderás esta diferencia , a menudo con el uso de frameworks js como el caso de React , te darás cuenta que el uso del <div> es desmesurado todo se hace con un <div> pero es una muy buena practica utilizar las tags de HTML según su función recuerda que HTML es el esqueleto de la pagina y el navegador entiende mejor si cada cosa lleva su nombre para así el poder identificarlo mas eficazmente. Espero sea de tu ayuda la info saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.