Home / Questions / 386365
Accepted
Julian
Asked: 2020-09-01 19:29:59 +0800 CST 2020-09-01 19:29:59 +0800 CST

What is the correct use of the div tag?

  • 772

The point is that I recently "finished" studying HTML and realized that the tag is often used <div>.

Right now I'm starting with CSS and I still can't see the need or usefulness of using this tag, rather, I use it very often <article>. I would like to know if someone can give me a more real or even exemplified explanation of this tag, which I notice is important but I still can't figure out why specifically.

In fact I would like to leave an example of an index to see if I should use a div or not.

<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>
html

2 Answers

  1. Best Answer

    He <article>creates a section in your document. One <article>is for you to place content there that, if presented on another page, still makes sense and there is no need for there to be other information outside of it for the content it contains to be fully understandable.

    It is normally used to structure posts of a page or products.

    A <div>doesn't give any meaning to the content it wraps, it's just used to have an extra box so you can add styles to it.

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

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

    You can take that news and distribute it in other places, by itself it would still be understandable without the help of more information outside of what is in the news.

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

    Here you just want to style that text without giving it a meaning or anything.

    An article, apart from the meaning that it also has in the document where it is found, creates a section, a section would be where a subtopic of the main topic of the page is discussed or it could be a subtopic of another subtopic, it is useful for readers of screen that scan the document.

    • 4

  2. well a <div>is a block tag that defines the existing logical divisions in the content of a page unlike, for example, <span>that it is an online tag, apart from that <div>it is generic it has no semantic meaning unlike other tags like this case <article>, review the concepts well of the tags and because they are semantic and you will understand this difference, often with the use of js frameworks such as the case of React, you will realize that the use of <div>is excessive everything is done with a <div>but it is a very good practice to use the tags of HTML according to its function remembers that HTML is the skeleton of the page and the browser understands better if each thing has its name in order to be able to identify it more effectively. I hope the information is helpful to you, regards

    • 2