Semantic HTML

In the previous chapter, we understand that elements can have different types, and we can use a tag name to label the type of the element. Prior to HTML5, some HTML elements were for presentational uses. Some of you may have heard these elements in old school IT classes, like <b> or <i> elements, which were used for defining bold and italic style of the text contents.

Now that HTML is based on semantic approach, HTML elements are now defined that the element type is representable for its usage and contextual structure. HTML5 has introduced more elements like <article> or <strong>, so other people are easier to understand what meaning that part of your content in that element is about.

The presentational part of the HTML elements would be responsible by CSS stylesheets as what I've told you in Chapter 1. Later when I discuss more on HTML elements, you will find every element has its own contextual or structural meanings that are easy to remember and use.

Referencing HTML Elements

Before introducing more HTML elements, I'd like to teach you some terms on referencing elements across the position of HTML documents.

In Example 1, <div> includes another element <p>.
We can call <div> is the parent element of <p>; and <p> is the child element of <div>.

In Example 2, <main> includes 2 children: <header> and <article>. <header> and <article> are siblings.
<main> and <article> are the ancestors of <p>.

Comments

Comments can be used within HTML file, just like you can have remarks in a normal document. These comments won't be rendered by broswers, so it won't be presented to users.
You can write comments within <!-- and -->. Especially when you're writing long HTML files, comments can act as remarks which can be referenced later on or be easily interpreted by others to edit your file.

Text Level Semantics

Text Level elements are inline elements. As you may have used some document software like Microsoft Word, sometimes, you may need to bold content or make text italic. In semantic way, these styling is to make part of your textual content to be emphasized or distinctive. In HTML, you may quote these texts using text level semantics to allow browsers to understand what are to be highlighted. These specially differentiated content, perhaps a few words or a sentence within a paragraphs, would be placed within the paired tags of an inline element.

<br />

<br /> is a self-closing element. It simply inserts a line break within your textual content.
In your .html file, all line breaks, tabs or space characters in your source code would be presented as a simple single space by browsers. When you need to insert multiple spaces, you would need to state &nbsp; as one space character, or a <br /> element as a line break.

<strong>

<strong> is to highlight the strong importance, seriousness or urgency of some parts within the content. Browsers usually implement a bold style on the text, so it is more conspicious for users to read it with higher importance.

<em>

<em> is to emphasize some parts of the content, but by no means convey the importance of it. Browsers usually implement an italic style on these elements.

<a>

<a> provides a link on the text through the href attribute. The value of the attribute can state an absolute or relative URI as discussed in Chapter 1. Users can click and visit to the given webpage.
There is also a target attribute where you may state whether: "_self": the current tab will load the URI; "_blank": the URI will be loaded in a new tab or a new window.
If you state the download attribute, where there is no required value, users will download the linked file instead of visiting the URI page.

<span>

<span> does not have any meaning, but is used for grouping some inline texts. This is particular useful when you use CSS or JavaScript later on, because you can assign these inline text blocks with specific styles or user actions.

Content Grouping Elements

The following will introduce some block-level elements. In using a presentation application, you may need to create boxes to position the content for layout purpose. Similarly, you would need block-level elements to prepare the layout of your webpage, and you can define the positioning details of the elements in CSS.

The content is no longer sentence level. These content grouping elements can group them in a systemetic way, but not to a semantic structuring level. For example, you may group sentences into paragraphs, group a part of content aside of the page, or group items into lists.

<p>

<p> simply groups the content as a paragraph. This is typically useful when you're writing blogs, articles, news, etc.

<ol>, <ul>, <li>

<ol> and <ul> are ordered list and unordered list respectively.
<li> is list items where you should put them as the children of <ol> or <ul> elements.
Similar to document composition software, listing is typically a format such that the listed items are prefixed with ordered numbers or dots.
The default format of <ol> is usually listed with numerical numbers, and that of <ul> is usually listed with circle dots. This can be changed using CSS, which will be discussed in later chapters.

<div>

Similar to <span>, <div> does not have any meaning. However, this is a block-level element. Compared to inline-used <span>, <div> content should not have sentence-level relationship with its siblings.

<main> & Section Structuring Elements

These types of elements often label the part of structure of your webpage. A webpage usually consist of different structures, like navigation bar, main content, footer, etc. You may use these elements to make the structure and sections of your webpage well. Actually, <body> is also a type of Section Elements, where one HTML document should contain this element so as to include all the content of the webpage.

<main>

From W3C, <main> is a Content Grouping Element, where there should exist one and only one <main> element in the HTML document. It includes the core content of the webpage, and exludes some cross-site repeatable UI elements like banners, search boxes or footer information.

Based on it's "core content" nature, it should not be under lower-levelled sectioning elements like <header>, <nav>, <article>, <footer>, etc., which will be introduced later in this section.

<header> / <h1>-<h6>

<header> is used for introduction or navigation. It may include other different types of elements and textual content. The content would refer to the upcoming context.
In Example 2, the <header> "Summer Taipei 2016" is about to introduce the upcoming article discribing the trip.

<h1>, <h2>, <h3>, <h4>, <h5> and <h6> are headings introducing the upcoming content. Within these heading elements, we usually put short and precise textual content. <h1> has the highest rank, while <h6> has the lowest. Browsers usually present higher-ranked heading titles with a more conspicious font style with dinstintion from other textual content.

<article>

<article> is typically a section of content that can be independently used. Usually, this can include a standalone news article, blog post, user comments, documenation, etc.
Therefore, the content of an article can be shared or interpreted alone, without any other articles or content of the web page like UI elements or ads.

<section>

<section> simply groups different contents. You may need to section your webpage in different parts for web content like "Vision", "Milestone", "History", "Location" in a typical About page.
For an article, you may section it in different themes, or arguments. You may also need to section a story in chapters, section a guide in steps, section a thesis in formal structure, etc.

<nav>

<nav> is a navigation element for users. This probably includes some navigation UI elements like links or buttons that help your user to go for different webpages. It's common for webpages to place a navigation bar on top of the page or on the side of an app for users to navigate across the website.

<footer>

<footer> includes the footer information for the nearest ancestor sectioning element. It is not a must to put it at the end of the section. In some cases, we may put contact information, site links, copyright remarks, etc. in the footer.

How to Structure a Webpage well?

To write a well-structured webpage, you have to be clear in mind what you have to put on a page. Just a like blank canvas, you'd need to dream what you have to draw and how you have to construct the picture well.

When you have an idea, you have to use the types of elements well and think about how the information is suited accordingly in order to shape your structure in a meaningful and presentable way. Try to use more semantic elements but to avoid overusing some meaningless elements like <span> or <div>.

You may think about:

1. Any navigation UI for users to go through the web pages?
2. Any footer information to be shown across the site?
3. In the main content, what sections will be presented in your web page?
4. Are there any articles displayed to the users?
5. Within an article, try to section well with appropriate and concise headings.

Reference & Next

W3C HTML5 Specification (Sec 4.3-4.5) includes a collection of definitions of HTML text-level, content grouping and sections elements. This is not only the reference document of this chapter of tutorial, but is also your detail dictionary with examples and hints for you to choose among different types of elements.

Now, we have structured the webpage well, and next, we'll need to style it to be a beautiful webpage.
In the next chapter, I'll introduce CSS. Though it is using another syntax, but its a great and standard tool for us to style and format a webpage.