Search code examples
htmlgoogle-chromeattributescode-snippetsdivide

How does the <div> tag support HTML code?

I have been searching on Google and other search engine products and searching:

What is <div> used for in HTML?

Here is what I get:

The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the <div> tag!

Is this true? I want to hear from the professionals. How are you to divide content inside HTML? the "body" attribute is another question I have, but I am only allowed to ask one question at a time.

Look at my code I have, and <div> I see isn't helping, at all:

<!DOCTYPE html>
<h1> Example Title </h1>
<p> Example Paragraph referring to the Example Title.</p>
<div id="div"/>
<progress onload="https://google.com"></progress>
</div>

How is <div> helping with the <progress> attribute? How does <div> help with anything, really?

Solution

  • Yes, into the div-tag you can put anything you want.

    since we all want clean and easy readable code, it's better to have tags with a special meaning, thats why there is something called: semantic html.

    What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer.

    there is nothing wrong at using div-tags as much as you want. but in future you, or you developer-teammates will have problems to read and understand your code.

    as Heretic Monkey said in the comment: the div is a container. for example:

    <div class="any-class">
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</div>

    width the div with class .any-class, you can for example style the whole content or use javascript on it or...

    try to avoid overusing div-tags like the following:

    <div class="any-class">
  <div>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p
  </div>
  <div>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </div>
  <div>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </div>
</div>

    here is a small "tutorial" about semantic-html https://www.w3schools.com/html/html5_semantic_elements.asp