How the HTML section tag works


So how are we going to do this with our HTML
code? Well we already know how to use the Div tag so we could use a Div for each one
of these sections. However since we’re new to HTML why don’t we do a quick search in
Google to see if there’s another HTML tag that might be better. So I’m going to do a search for HTML section,
and at the very top here we have HTML section tag – interesting. So if we click on that
it gives us an example. So section in this case looks a little bit like how you might
use Div and the description is a section in a document, and it shows an opening section
tag, a heading and paragraph and a closing section tag. If we scroll down there’s not a ton more information
here except that it displays as a block, and we’ll talk more about this display property
later. So if we want some more information this is a good time to jump over to developer
dot Mozilla dot org. So if we click back and we click on the section
on developer dot Mozilla dot org, we can get a little bit more information about what this
means. So at this point we know that we can use section, and we know that we can use Div.
So which one is the better option? So the details here might be a little overwhelming
if you’re not used to reading this but it gives us some tips. So for example, if it
makes sense to separately syndicate the content of a section element use an article element
instead. So what this means is that if there’s a section
of our page that’s actually a sense contained article that we shouldn’t use section but
we should use article. And secondly it says don’t use the section element as a generic
container, this is what Div is for: especially for sectioning just for styling purposes. A rule of thumb is that the section should
logically appear in the outline of a document. So in our case our motivation is that we want
to style this differently, but ultimately we also want to separate out the sections
of our document in a way where if we were to create an outline of our homepage we would
see separate sections with the different headings that we’ve supplied. So far it seems like section might be the
best fit. So we’ll take that approach for now and we can return to this later if we
feel like section isn’t the best approach. It’s good to know that we don’t want to use
section just for styling purposes. If we scroll down to the bottom of this there’s
a sections and outlines and HTML document article. If we click on it there’s some good
information here about why it is that we might use the section tag instead of a Div tag,
and there’s a lot more examples here. Specifically it shows us how this might have
been done in the old version of HTML, HTML four, and we can scroll down to see what would
happen in HTML five, and here’s some examples. So here we have a section and then within
this section we have a heading, and then we have sections within that section. Each section has a heading and some content
and if we scroll down it shows us what the outline that would lead to would be. Now at
the very top of this page it explains why this outline might be important. Specifically,
that it might be used by screen readers, and it also notes that there’s no implementations
of this outline algorithm, which is what converts these sections to the outlines, yet. And so instead it’s more important to focus
on your headings and making sure that headings are properly outlined, because screen readers
and other technologies like search engines, use those headings in order to create outlines
and figure out what’s important on the page. So the take away here is that if we used Divs
it probably wouldn’t be a big deal. But it still seems like the section tag is a little
bit more descriptive. Now there are a number of elements in HTML five, which is what we’re
using, that simply describe content on the page, and we’ll learn more about that as we
get into a deeper discussion of accessibility. But what they all have in common is that they
work like Divs in terms of styling. That is they have no default styling. So we can do
what we want with them and not worry about having to override existing styles in the
browser. Phew!

2 thoughts on “How the HTML section tag works

Leave a Reply

Your email address will not be published. Required fields are marked *