Structuring your page
It’s all well and good adding different elements to the body of your page, but modern standards suggest that you think about how you want to structure the page into distinct sections. When you think about it, most websites tend to have very distinct sections.
They usually have a “header” section at the top of the page (NOT to be confused with HTML <head> tag!) which normally has a navigation bar and maybe some big H1 text inside it.
This header section is defined with the <header> tag.
Inside the header or directly below, they might have a navigation bar sub-section with menu items or hyperlinks.
This navigation section is defined with the <nav> tag
Below this you might have something like a big image, or something very eye-catching, and this could be defined as a “section”.
This section is defined with the <section> tag.
Below this you might have a section for actual content of the page. OFten this is defined as an “article” section
This is defined with the <article> tag
You might then have a footer section at the bottom for more hyperlinks, and maybe some contact information.
This is defined with the <footer> tag.
Let’s see how this might look….
And this is what it would look like on the page….
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.
The <img> element defines the actual image/illustration.
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>Now we can all agree that it still doesn’t look great, but that’s because we’ve not applied any styling to our page yet with CSS…..but the point is that we’re starting to structure the page into distinct sections, so when we come to style those sections, not only can we reference the individual elements, but also all of the elements within specific sections. For example, the text inside the nav in the header section might be identical to the text inside the nav in the footer section, but you might want them to look very different, in which case referencing the header in CSS will be different to referencing the footer in css.
