oblaat
a guide to conceiving, creating & publishing your own website
a guide to conceiving, creating & publishing your own website
Most things in this world can be divided into distinct parts. Even atoms can be split up into protons and neutrons and electrons, which are made of quarks and gluons. Documents are not only the same, they are even easier than most things to cut up and annotate accordingly.
The content of a HTML document itself comes in the form of words and images and links, as discussed, but there is also structure beyond this.
The structure already given by different heading levels is great to work with and self-explanatory. But a computer does not know, for example, what part of the document has all the good bits. It does not know that the collection of links on the side is actually made for navigation, either. It doesn't even know that your sidebar is a sidebar.
Lucky for us, HTML is a language which describes the features and content of a document. Seeing as these things are very important to describe, there are tags to represent all of these categories and more.
These tags don't make any visual difference by default, but with CSS styling, that can completely change.
header tagThe header tag can wrap around whatever part of a document comprises the header. On oblaat, the header is the feature image, the title of the website which links to the homepage, and the subtitle for the website.
Many headers may include the title of a website, a logo and some navigation. The title of the web page may also be included.
The header will generally stay the same across the pages of one website to give a website a consistent and strong identity, but it doesn't have to stay the same. It doesn't have to consistently exist, or exist at all, but if there is something consistently at the start of your web pages—like the title of the website and some navigation or a logo—it is good to state you're using a header. After all you're already doing it!
Here is an example of a header containing a top-level heading and one subheading to represent the title of the website and the title of the page:
<header>
<h1>My Cool Website</h1>
</header>
Headers often contain navigation sections, declared with the nav tag. They might also appear at the start of smaller sections of a document, if its header is involved enough.
nav tagThe nav tag defines a part of the document reserved for navigation. A list of links on a sidebar, for example, counts as navigation. So does any consistent links to different parts of a website underneath the website title. So does an entire sitemap with links to every part of the site.
Let's add a navigation to the header from before and put a list of three links inside of it while we're at it.
<header>
<h1>My Cool Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/links.html">Links</a></li>
</ul>
</nav>
</header>
Can you get a feel for what's going on even if you don't exactly know what the other elements are yet? If you can, awesome. If you can't, don't stress. That comes soon after all.
main tagThe main tag declares exactly where the main content of a web page is. If everything else on the page is reused, like the header and the footer and the sidebar and the navigation, then this is the truly unique part.
This tag is useful for people using reader mode in the browser, and even for screen reader technology. If you ever wanted to dodge the advertisements on a news website and turned on reader mode, your browser likely extracted text from the main tag while ignoring everything else.
<main>
<h2>Homepage</h2>
<p>This is the homepage of My Cool Website. Come take a look around.</p>
<p>Here you can find all sorts of cool things.</p>
</main>
footer tagThe footer tag defines the footer, just like the header defines the header. Just like the header, this isn't always used or needed, but it is often repeated between pages.
Usually a website's footer will contain some copyright disclaimers and/or various links related to the website at large.
<footer>
My Cool Website belongs to ME!
</footer>
aside tagThe aside tag denotes any content that is only indirectly related to the main content. This could be a fun fact about something mentioned in the main content that doesn't actually have any bearing on the rest. It could also be something like a sidebar.
<p>Oblaat is a starch wrapping for candy in Japan. It is also called oblate film in English.</p>
<aside>
<p>Oblaat is originally a Dutch word that refers to sacramental bread.</p>
</aside>
section and article tagsThe section tag is generic and refers to any defined section in a document. Meanwhile, the article tag specifically refers to any article that could (and should) be read on its own when removed from the rest of the document.
Because they should stand on their own, articles usually require headings inside of them while sections don't.
<article>
<h2>My Summer Holiday</h2>
<section>
<h3>Getting there</h3>
<p>I took a 9 hour flight and...</p>
</section>
<section>
<h3>My hotel</h3>
<p>My hotel's bed was...</p>
</section>
</article>