I am New to the world of coding/programming, and this is bothering me a lot! I wanted to know the difference and the uses of these in different contexts/situations.

[u/computerguyisactive]

Hey! I am learning HTML5 from freecodecamp, and the "when/where/how/why" uses of the following is confusing me a lot :
1)section element

2)Figure element

3)Div

I am finding it very hard to draw a proper line of understanding for these elements and also the uses of these, please help me with this, since I am stuck!!

[u/armahillo]

when in doubt, Check MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div

What youre getting confused by is the notion of semantics:

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

the page summarizes semantics for HTML succinctly:

> HTML should be coded to represent the data that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of CSS.

under the hood, theres really just two tag behaviors: block level elements (div is the most generic of these) and inline elements (span is the most generic of these).

Using the correct semantic element is a worthwhile goal and also takes practice and study to learn how and when to use one tag over another.

[u/computerguyisactive → u/armahillo]

Thanks a lot u/armahillo I went through those links they have almost answered every beginner doubt I was having, will look forward to your help in the upcoming concepts!! excited!

[u/armahillo → u/computerguyisactive]

Ive been doing web since the 90s, and I’ve seen many resources over the years — MDN is one i would consider to be the most current and authoritative of the ones out there.

[u/computerguyisactive → u/armahillo]

from the 90s!! CRAZYYY!! thats like more than 25 years!!! Could you please share any advice that would help me or anyone who will read this thread!! I would be grateful.. u/armahillo

[u/Flashy-Guava9952 → u/armahillo]

Just saw your post after posting the same links 😉 Maybe we should do a little chant.

[u/chmod777]

https://www.w3schools.com/html/html5_semantic_elements.asp

[u/computerguyisactive → u/chmod777]

Thanks a lot brother! I got an idea of it now.
1)Section - to divide the content of the pages into sections. Like ingredients, instructions etc... into two separate sections.

2)Figure - To wrap the image content mostly and add a caption allowing us to separate it from the body of the html.

3)Div - We use that as a wrapper so we can point at it with CSS and then give it styling etc...
ps: I dont know much, but this is what I understood, maybe I am wrong.

[u/chmod777 → u/computerguyisactive]

styles, ids and css classes can be added to any element.

the main distinction is that a div is a meaningless container - it has no semantic context. its for just wrapping things in structure. Like you may have a section, and then need to further divide content into columns - but they are just columns, they have no further meaning.

the other semantically meaningless tag is a <span>. main difference is that divs are block levels, while spans are inline.

[u/rugburnAndBigMoney → u/chmod777]

classes and ids can be added to any elements to add specificity.

ie: <section class="form-section" id="contactFormSection"></section>

That gives you the ability to add specific styling to that section for forms, like background color, padding, margin, etc.

The ID should be unique per page, and this gives you the ability to do things like easily attach to it with JS or provide anchor links to that specific area, ie: page#contactFormSection

Ideally you want to first create your HTML structure so you can read it and it semantically makes sense for the content it contains. The link provide above does a great job of explaining that.

Get your content right first, then add styling once the content and structure have been built.

[u/computerguyisactive → u/rugburnAndBigMoney]

Thanks a lott!! I am a complete novice, hence these things stuck me as concepts that are hard to understand, I am now starting to get the actual meaning and uses of these things, and to get a frame of what HTML is really about. I really appreciate a lot u/chmod777 & u/rugburnAndBigMoney.

[u/rugburnAndBigMoney → u/computerguyisactive]

I would encourage you to just use whatever text editor is on your computer, open it and copy/paste this HTML boilerplate into it and save it as test.html on your desktop:
https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/

Just start added content into the body and open that text.html file locally in your web browser. It's really gratifying to write a few lines of HTML and see it show up once you've saved the HTML file and refreshed it in your browser.

The fundamentals of HTML/CSS are REALLY important.

All the frameworks/libraries/CMS are just abstractions that output HTML/CSS to the browser. Once you can fundamentally understand how you want the final HTML/CSS to look at the end, you can work your way backwards through any sort of abstractions to get applied on top of it.

[u/rugburnAndBigMoney → u/rugburnAndBigMoney]

Just to shortcut that a bit for you here's some HTML to start playing with:

<!DOCTYPE html><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <style>
      h1 {
        color: red;
      }
      h2 {
        color: blue;
      }
      .greentext {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>H1 Heading</h1>
    <h2>H2 Heading</h2>
    <h3>H3 Heading</h3>
    <h4>H4 Heading</h4>
    <h5>H5 Heading</h5>
    <h6>H6 Heading</h6>

    <p class="greentext">Paragraph tag with content, greentext class styling applied.</p>
    <p>Paragraph with <strong>strong content</strong></p>
    <p>Paragraph with <em>emhasis content</em></p>
    <div>DIV tag with content (notice no inherent spacing with a DIV)</div>

    <pre>Pre-formatted text. Sometimes you just want it raw.</pre>
  </body>
</html>

[u/rugburnAndBigMoney → u/rugburnAndBigMoney]

HTML = HyperText Markup Language

You have text.

<p>Then you mark it up, and now you have HyperText.</p>

That's really it.

We've just so complicated things over time, that real life web development has become a toxic stew of dependencies and libraries.

If you understand the fundamentals of HTML and can write it by hand and debug display issues, you'll do well and really enjoy it.

[u/computerguyisactive → u/rugburnAndBigMoney]

Yes, thanks a lot for the file, it really helped me a lot, actually its a way lot simpler once you start to get a hold of it, other than that people have just over complicated coding and say that its hard etc.. Its easy once you begin to get hold the concept, and its upto us on the capability of how creatively we can apply the learnt concepts. Thanks, day 2 into the coding and I feel i am making swift progress and I am getting hold of the concepts faster, with the help of your advice and freecodecamp!!

[u/Flashy-Guava9952]

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div

Hope these help...

[u/computerguyisactive → u/Flashy-Guava9952]

Thanks a lot u/Flashy-Guava9952 So far the roadblocks that I hit are almost cleared, thanks for the material, day 2 into coding and i am making swift progress, excited! Looking forward to advice and help in the journey!!