Mind Diary

Text

Structuring Main Content Areas

A Single Blog Article Using New HTML5 Structure :

Take a look at the main content area of a blog. There may be multiple articles, each containing metadata and the actual textual content of that article.

Here is some typical markup:

Typical markup for a blog post

You can replace the outer <div class="post"> with <article>, but you can go further still. The HTML5 <header> and <footer> elements can be used multiple times on a page, each time referring to the section it is in.

The heading and the time of posting are introductory matter and thus the job for <header>, right ?
Similarly, the metadata about the post that is currently in a paragraph with class="postmetadata" is better marked up in HTML5 as a <footer>, which the spec says "typically contains information about its section, such as who wrote it, links to related documents, copyright data, and the like."

The revised structure is:

A single blog article using new HTML5 structure. A single blog article using new HTML5 structure.

Generic Structure vs. Semantic Value :

HTML 4 gives us generic structures to mark up content.
For example, <div> is just a generic box that tells the browser, "Here's some stuff, it all belongs together," but it does not mean anything; there is no semantic value beyond "these belong together."

Where possible, we will replace generic boxes with new HTML5 elements, while still using <div> where there isn't an appropriate element, just as we did in HTML 4.

The <time> Element :

The <time> element is used for encoding dates and times (on a 24–hour clock) for machines, while still displaying them in a human–readable way.

The uses of this in web pages are not hard to imagine: a browser could offer to add future events to a user's calendar; content aggregators could produce visual timelines of events.

The machine–readable part of the <time> element is encapsulated in the element's datetime attribute. The content inside the element is what gets presented to end users.

The machine-readable part of the time element is usually encapsulated in the element’s datetime attribute.

The pubdate Attribute :

The pubdate attribute indicates that this particular <time> is the publication date of an <article> or the whole <body> content.

An Example:

The pubdate attribute.

We can see that there are two dates within the <header>:

  1. The actual date of the party.
  2. The publication date of the article.

The pubdate attribute is required to remove any ambiguity.

More <header>s and <footer>s !

Each article can have its own <header> and <footer>.

This means that, in addition to the "main" header and footer on a page, each article can have its own header and footer, as well.

They can be separately styled with CSS:
For instance, body>header and body>footer target the main header and footer (assuming that they are direct descendants of <body>), whereas article>header and article>footer target the inner structures.

Note that so far you have introduced no ids or classes as hooks for CSS !

"Block–Level" Links :

Look at the following example:

Wrapping links around block-level elements

In the HTML 4 spec, wrapping links around "block–level" elements was not allowed.

However, it turns out that all browsers quite happily allowed links to be placed around various block-level elements.

Thus, in HTML5 one link can surround the whole <article>, as the browsers already handle wrapping links around block–level elements.

<section>

NOTE:
A <section> generally begins with a heading that introduces it.
However, if you wouldn't use a heading, or you want some wrapping element purely for styling purposes you probably should be using a <div>.

<section> is not "a self–contained composition in a document, page, application, or site."
It is a way of either:

  • sectioning a page into different subject areas, or
  • sectioning an article into sections.

Consider this HTML 4 markup:

HTML4 markup for somehow sectioning an article

Now, does the last paragraph starting with "Vital caveat about the information above:" refer to the whole article (i.e. everything under the introductory <h1>), or does it refer only to the information under the preceding <h2> ("Fan Club uniforms") ?

In HTML 4, that paragraph would fall under the <h2>, and there is no easy way to semantically change this.

In HTML5, the <section> element makes its meaning unambiguous (which is what we really mean as web developers when we use the word "semantic"):

Sectioning an article in HTML5

Such "sectioning" can be diagrammatically illustrated showing that the paragraph starting with "vital caveat" refers to the whole <article>:

A diagram shows the sectioning of an article in HTML5

It would not have been correct to divide up this article with nested article elements, as they are not independent discrete entities.

The Most Appropriate Element !

HTML is a general language, so there aren't elements for every specific occasion.
Choose the most appropriate element for the job and be consistent when marking up similar content throughout the site.

<details>

The <details> element introduces native support for a common behaviour – an expandingcollapsing area – thereby removing the need for custom JavaScript.

An Example of the <details> element. An example code of using the details element

The contents of the descendant <summary> element are focusable and act as a control that, when activated by mouse or keyboard, expand or collapse the remainder of the element.

If no <summary> element is found, the browser supplies its own default control text, such as "details" or a localised version.
Browsers will probably add some kind of icon, such as a down arrow, to show that the text is "expandable."

<details> can optionally take the open attribute to ensure that the element is already open when the page is loaded:

<details open>

NOTE:
The <details> element is not restricted to purely textual markup – it could be a login form, an explanatory video, a table of source data for a graph, or a description of the structure of a table for those who use assistive technology or have learning disabilities.

<figure>

The <figure> element wraps an image (or a video, or a block of code, or a supporting quotation) and its caption, which goes in the <figcaption> element:

An example HTML5 code for using the figure element with the figcaption element

Notice that there is no alt attribute on the image.
In figures where the figcaption text tells you all you need to know, don't duplicate this in alt text because duplicated content can quickly become very annoying.

NOTE:
It is recommended that 99.99% of the time, one should continue to use alt with an image, with purely decorative images getting empty alt="".
However, if the function of the image is exactly expressed in the <figcaption>, use no alt at all.

(pp. 60–62)

<mark>

The <mark> element allows you to do the markup equivalent of using a highlighter pen to bring out some words on a printed page.
However, it is not the same as emphasis – for that you use <em>.

(p. 63)