Getting Started With HTML, Part 4
To review: last time we covered metadata, linking CSS sheets and commenting HTML. You can check out our last post here.
Today we’re going to review more tags for our body element. The last time we covered the body element, we covered headers, paragraphs, anchors, line breaks and divs. You can check out that post here.
So where to begin? Last time we covered the body I taught you about the <div> tag. Perhaps not so intuitively, the word “div” refers to “division.” Unlike other elements, it does not tell the browser about itself, and usually does not add any additional styling other than separating the content inside from other block elements (much like two paragraphs separate themselves automatically). But what if I want to tell the browser or web crawler what each div does?
Thankfully, we have tags that behave similarly, but offer semantic meaning to the things they contain. Here I’ll introduce three that might be helpful: <header>, <article>, and <footer>. Like their names imply, they carry the header, article and footer of a page, respectively. Thankfully, they’re easy enough to understand in that they function identically to the <div> element we investigated earlier.
So what’s the difference? Remember that web crawlers and other non-human readers cannot rely on what we call the visual hierarchy you establish on the page – that is, the hierarchy that is created by colors, font weights, etc. Though the visual hierarchy remains an important part of web development, these tags are semantic, meaning they describe the elements they contain. So for instance, we might have a snippet of code that looks like this:
<body>
<header><h1>Alien Hovercrafts</h1></header>
<article>
<h2>Are they real?</h2>
<p><strong>Yes!</strong> Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua...</p>
</article>
<footer>Copyright 2016 myself</footer>
</body>In the above snippet, the tags describe what they contain: <header> contains the webpage’s header (which could also include a byline or masthead), <article> contain’s the page’s article (which in turn contains the title, paragraph, etc.) and the <footer> includes material that goes at the bottom of the page (which could also include an extended navigation menu, for instance).
A final and important part of a webpage is the image. Even though pages mostly consist of text, especially on something like a blog, it’s not unusual to want to include an image to go with the text or as a decorative element. There is a tag, <img> (short for image) that lets us place an image on the page. It takes two required attributes: src, or source, and alt, or alternative text. The alt text is what a screen reader or web crawler would read, so it should describe the image rather than be a funny caption. An optional attribute is title, which offers “advisory information” that can be viewed when you hover over it. For example:
<img src="/photos/hovercraft.jpg" alt="An image of a previously-unknown
alien hovercraft flying over the New Mexico desert late at night."
title="I took this image while camping one night in April." />Like <br>, the <img> tag is self-closing, so you can use the /> or just close it off with a right angle bracket.
Phew! A brief lesson that opened up a world of possibilities. There are tons of semantic tags like <header> or <article>: <section> for instance, defines a section block; <nav> defines a navigation block. Go out and look at the sources of your favorite websites, or look at something like the Mozilla HTML reference which lists every HTML tag you could use (just don’t go crazy).
Next time, we’ll learn to style our pages with a new style sheet language called CSS! Get ready!
