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.
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:
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.
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
So my question is why have we used a element in this exercise instead of a
I noticed a new element sneaked into the code in this example
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?
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
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.
Love the course so far though!
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
“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
@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
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
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!
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.
<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.
<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:
<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.
id attribute, the
class attribute does not have to be unique meaning multiple elements in the same HTML document can have the same
<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.
I know it can be frustrating seeing something that you don’t understand. Looking those up was confusing to me too. That said, from what I understand about coding, you will always encounter things you don’t understand. It is good to get in the habit of knowing how and where to look stuff up. So far, I am really liking Mozilla’s HTML documentation. I recommend keeping their documentation open in a second tab when doing coding exercises. Their other content may be useful in understanding other web development coding skills too.
Thank you for this simple yet inclusive description of the tag. Very helpful.