WRITING HTML MARKUP pt. 2

[The HTML5 outline algorithm

Ordinarily, for an HTML document, headings would begin with an h1 for the main page title and then progress to using lower hierarchy title tags as needed for subheadings and the like.

However, HTML5 introduced the ability for each sectioning container to have its own self-contained outline. That means it is not necessary to think about which level of heading tag you’re at in terms of the entire document. You could just concentrate on the sectioning container you are currently working in.

To illustrate why this might be preferable, within a blog, post titles could be set to use <h1> tags, while the title of the blog itself could also have an <h1> tag. For example, consider the following structure:

 <h1>Ben's site</h1>

<section>

<h1>Ben's blog</h1>

<p>All about what I do</p>

</section>

<article>

<header>

<h1>A post about something</h1>

<p>Trust me this is a great read</p>

<p>No, not really</p>

<p>See. Told you.</p>

</header>

</article> 

Despite having multiple <h1> headings, the outline still appears as follows:

Ben’s site

Ben’s blog

A post about something

As such, theoretically you shouldn’t need to keep track of the heading tag you need to use in terms of the whole document. It should be possible to use whatever the appropriate level of heading tag is needed within each piece of sectioned content and the HTML5 outline algorithm will order it accordingly.

However, the reality is that search engines and the like make no use of the HTML5 outliner at present. Therefore, from a pragmatic standpoint, it probably makes more sense to continue thinking about headings in terms of the whole document. That will make your documents easier to read for search engines and also aid assistive technology to infer the correct meaning.

More HTML tags

The div element

The most ubiquitous grouping element is the <div>. The <div> is so widely used because it is opinion-less. It conveys nothing. The only implied meaning of a div is that it groups something. Despite that, you will often see a div wrapping nothing but a string of text.

You should only opt for a div as a last resort. It is the element to use when you can think of nothing better.

We have more elements in HTML than ever before, so as we continue, hopefully we will get acquainted with plenty of other elements that will be more suitable for the jobs you currently use a div for.

The p element

The <p> element is used to markup a paragraph. However, don’t think that means it can only be used on text 3-4 lines long. On the contrary, use it to mark up any text that cannot be better marked up with one of the other elements. For non-specific text, the p element is definitely a better choice than a div.

The blockquote element

A blockquote is used to markup text that is quoted from somewhere else. You don’t have to wrap the text with any other element, but you can. For example, knowing what we now do about the p tag, we can use that inside a blockquote too if we wish. Here is a simple example using blockquote.

First, there’s an introductory section of text in a p tag, and then a blockquote:

 <p>I did like Ben's book, but he kept going on about scones. For example :< /p>

<blockquote>

All this writing about scones in our sample page and there's no image of the beauties! I'm going to add in an image of a scone near the top of the page; a sort of 'hero' image to entice users to read the page.

</blockquote> 

There’s some good examples of how and when to use blockquotes over on the HTML specification too: https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element.

So we use it as an element to call out visuals of any sort, and the accompanying <figcaption> provides the means to add some text supporting the visuals. Now, it is worth pointing out here that while we should always provide text in the alt attribute of an <img> tag to support assistive technology or to mitigate problems if an image fails to load, it isn’t a requirement to provide a figcaption with a figure. The figcaption is added if you want to add a visual description alongside the visuals. Here’s how we could use it to revise a portion of markup from the first chapter:

 <figure class="MoneyShot">

<img

class="MoneyShotImg"

src="img/scones.jpg"

alt="Incredible scones baked to perfection and ready to eat"

/>

<figcaption class="ImageCaption"> 

This image isn’t of scones I have made, instead it’s a stock photo from Wikipedia

</figcaption>

</figure>

You can see that the <figure> element is used to wrap this little self-contained block. Inside, the <figcaption> is used to provide a caption for the parent <figure> element.

It’s perfect when images or code need a little caption alongside them (that wouldn’t be suitable in the main text of the content).

<details> and <summary> elements

How many times have you wanted to create a simple open and close widget on your page? A piece of summary text that when clicked, opens a panel with additional information? Modern HTML facilitates this pattern with the details and summary elements. Consider this markup (you can open example3.html from this chapter’s code to play with it for yourself):

 <details>

<summary>I ate 15 scones in one day</summary>

<p>

Of course I didn't. It would probably kill me if I did. What a way to go.

Mmmmmm, scones!

</p>

</details> 

Supporting browsers typically add some default styling to indicate the panel can be opened. In Chrome (and also Safari) that’s a dark disclosure triangle. Different browsers have their own implementations of how we can deal with any marker for the details. As this is typically not a selector that has been defined in any W3C specification, to disable it in this instance, you need to use a proprietary pseudo class (note the -webkit- prefix):

 summary::-webkit-details-marker {

display: none;

} 

You can of course use that same selector to style the marker differently.

Currently, there is no way of animating the open and close. Without JavaScript, there’s also no way of toggling other details panels closed when another details/summary combination is open. I’m not sure either of these desires will (or should) ever be addressed. However, I’ve therefore found the usefulness of these elements pretty limited by themselves. Rather than an all-in-one open/close drawer solution, you should think of them as a way to more semantically facilitate what you would have done previously with a display: none; toggle on a standard div with the help of JavaScript.

The <address> element

The <address> element is to be used explicitly for marking up contact information for its nearest <article> or <body> ancestor. To confuse matters, keep in mind that it isn’t to be used for postal addresses and the like (unless they are indeed the contact addresses for the content in question). Instead, postal addresses and other arbitrary contact information should be wrapped in good ol’ <p> tags. I’m not a fan of the <address> element. In my experience it would be far more useful to mark up a physical address with this element. However, hopefully it makes more sense to you.

We have now covered the majority of the sectioning elements of HTML. We will now move on to the text-level elements. These are the elements used to mark up individual words, letters, and symbols to provide explicit meaning as to the intent.