What are these new elements? (section, class, and hr)

If I’m being totally honest, I’m not thrilled to be seeing “class” or “section” at this point in the studies. I don’t know what these are, and now I am having to google around and figure out why these have been added to the code, what they do, etc. Just some feedback.

3 Likes

The section tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
you can also check at:

https://www.w3schools.com/tags/tag_section.asp

1 Like

Yeah, it’s distracting for things like that to just show up out of nowhere with no explanation. I thought I had accidentally skipped a lesson somehow.

7 Likes

I was curious about the element and did some googling. From what I could find sections should “generally” have a heading and are used as a container for a section that doesn’t have a more stand alone semantic to represent it. How ever, they should not be used as a generic container. This is where a

element should be used.

So my question is why have we used a element in this exercise instead of a

element? I guess I’m seeking clarification on why this is more appropriate here?
1 Like

I noticed a new element sneaked into the code in this example <hr>
After checking the MDM Web Doc resource I found that it creates a “thematic break” and line (which is then styled in CSS.
MDM Web Doc link

Am I right in saying this is similar to a <br> but just having an option to create a stylized line in the break?

2 Likes

Same here I also thought I has skipped something

I briefly remember hearing about this in a previous section, so i apologize. I just find it easier to understand the aforementioned concepts with having a now further understanding of HTML in general.

Anyways, in this lecture it had in the code

If i remember correctly, section is similar to

in the sense it sections off parts of code?

then also what is class=“cooked” used for in this example?

Thank you in advance!

Totally agree, I’m also feeling like the further ahead I get into this course, the more elements are added without explanation, not sure if it’s intended to be that way or not. :confused:

Love the course so far though!

4 Likes

Yes, more and more stuff is added and it seems like I am loosing track…
what is ? i thought it would be part of input. It looks like range to me…“rare”…“well-done”

I’m also new to web-dev, but here are my answers to your questions after and I hope they are useful. Feel free to correct me if you feel something is wrong.

The answer about what the “section”, “header” (different than “head”), or “div” tags are, that have appeared in the code they gave us but haven’t been explained, is explained in this video that was given to us as an optional watch. It is a video by CodeAcamedy itself: https://www.youtube.com/watch?v=uxmB8MlO3m8

It is a VERY important video because it explains that though HTML is flexible and different tags can be used to describe the structure of the same page, we have must carefully choose the tags in a way that is semantically most appropriate so that our web-page is meaningful, readable, searchable by search-engine algorithms, and accessible to all users including visually-impaired users who use screen readers to browse websites. To know more semantically-meaningful tags in HTML (which should be used when possible over semantically-meaningless tags), you can refer to this page: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines. Semantically meaningless tags I think are used only when we need to separate out some content for styling it differently in CSS or for using it in a different way in JavaScript or if no more meaningful tags are available.

The “class” attribute is used later for linking HTML with CSS and JavaScript. It is kind-of like the "id " attribute except different tags can have the same value for their “class” attribute whereas the value of “id” attribute must be unique for each tag.

“hr” tag defines a semantic or thematic break in content unlike a “br” tag, which is a semantically-meaningless tag used to start a new line (without the necessity of a thematic break in content). You will understand semantic tags vs. semantically-meaningless tags more after you watch the video linked above. “hr” and “br” tags can also be styled differently in CSS. As an aside, it is important to note that HTML tags, including “br” and “hr” tags should not be used for styling and only for structure. This post expands on that: https://stackoverflow.com/questions/462619/should-br-and-hr-be-avoided-at-all-costs-in-web-design

13 Likes

@beta2513521600 I’m really happy you posted this! I think the videos are easy to overlook since the lesson will advance regardless, so I can totally see where folks are coming from, but they are critical for context and future applications.

Happy to see folks helping each other out here :grinning:

2 Likes

Even if i kinda agree with you, i’ve read once that programmers and tech supports are just normal people better at googling than others. You will probably have to do this for your entire career, so i would recommend to get used to it :wink:

1 Like

I’m glad this popped up I was confused too.

This is the worst lesson by far until now. Forms don’t seem to be that complicated but they somehow managed to make it incomprehensible.

The way i’m interpreting it is that class can refer to many different elements on a page which can then be stylised with CSS whereas id is for single elements.

section is a way of grouping parts with no inherent semantic meaning but to give the code some grouping which will then be displayed in a section of the page. div seems to be more for grouping unrelated elements for styling purposes. thead and tbody remind me of section.

hr is like how section is to div, it shows a thematic shift and can be styled differently with CSS.

This is how i try to picture it anyway!

2 Likes

Sooo Section=Div ? or what I’m confused

<section> is similar to <div> but has some slight differences.

<div> is used entirely for styling, grouping elements together for readability conveniance, functionality with <script>, or linking an <a> to it. It by itself has no effect on the HTML page.

However <section> is used for the purpose of grouping things with semantic HTML when there is not a more specific HTML element, such as <article>, that can be used.
The semantic HTML improves SEO, allows bots and screen readers to better understand the code, and with paired with elements such as <div> allows for better readability.
FInally the <section> element adds white space between itself the objects around it.

For more reading you can see the MDN documentation on both of these elements:


1 Like

The HTML <section> element is used to group related content together. <section> elements can be used to explicitly define sections in the document outline. <section> elements must have a heading, otherwise, it will be an untitled section. <section> elements should not be used for layout purposes (use a <div> instead) and should not be used for self-contained content, that’s what an <article> is for. Only use <section> elements when grouping related content together. Here’s a video by Codecademy themselves talking about semantic HTML https://www.youtube.com/watch?v=uxmB8MlO3m8. Semantic HTML helps things like screen readers, search engines and web crawlers understand the meaning behind the content on a web page, rather than just understanding the syntax.

The class attribute adds an identifier to an HTML element. It can be used to style specific elements in CSS or to add functionality to specific elements using JavaScript. Unlike the id attribute, the class attribute does not have to be unique meaning multiple elements in the same HTML document can have the same class attribute.

The <hr> (horizontal rule) element defines a thematic break. It can be used to define a shift of topic. While it does display a horizontal line, you should only use them in a shift of topic, change of scenery, etc. If you wish to display a horizontal line for presentational purposes, use CSS instead.

1 Like