Reading Notes: "HTML5 Development Manual"--New Structural Elements of HTML5

This is a series of content to supplement the basic knowledge of HTML5, others are:

Although I have been engaged in front-end development for a long time and have used HTML5 tags, my understanding of semantics is not clear enough. I saw books like HTML5 in the library before and basically just skipped them. I thought it was just to introduce some tags for some beginners to read, but after reading this book, I was deeply inspired and shared it.

1. New structural elements in HTML5

1. HTML5 initial file

1.1、doctype

Before, the declaration of doctype was like this:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//en"
"http://www.w3. org/TR/html4/strict.dtd">

doctypeCalled the document type declaration (Document Type Definition), it is always as the first line of the HTML file. The doctype is part of the WEB standard requirements and is used to tell the browser how to handle the document, which is why it is placed on the first line of the HTML file.

If you don't write doctype, the browser will enter weird mode (quirks mode), then the code you write will not work properly under some browsers.

Now, HTML5 provides a more concise standard document declaration:

<!DOCTYPE html>

1.2, character encoding

The first line in the head tag needs to contain the charset (character set) declaration, which tells the browser how to parse the file.

In HTML4, declaring charsets requires doing this:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Now, in HTML, just declare the charset:

<meta charset="utf-8">

As concise as a doctype declaration!

1.3, JavaScript and css links

HTML5 helps reduce a large number of markups in the page, and also simplifies the calls of JavaScript and css.

In HTML4, script and link elements need to use the type attribute:

<script type="text/javascript" src="xx.js"></script>
<link rel="stylesheet" type="text/css" href="xx.css" />

In HTML5, the simplification is as follows:

<script src="xx.js"></script>
<link rel="stylesheet" href="xx.css" />

In HTML5, browsers already assume that script is a JavaScript file and link is a css file, so it is okay not to write the type attribute.

1.4, grammar writing style

In HTML5, several coding styles are available:

can be in all caps:

<SCRIPT SRC="XX.JS"></SCRIPT>

Can be all lowercase:

<script src="xx.js"></script>

no quotes

<script src=xx.js></script>

can also be mixed

<SCRIPT src=xx.js></script>

While these can be used, consistent coding practices are strongly recommended. This will not only help you, but also the people who plan to use your code. We've all used XHTML, and we should be closing all tags, using lowercase letters, and enclosing attributes in quotes.

A completed HTML5 initial page structure is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!--新HTML元素区域-->
  </body>
</html>

Save the page as a .html (or .htm) file.

1.5, HTML5 verification

Validation is a useful tool to check why things might go wrong and is an important step in the development process. You can refer to the following websites to verify the consistency of your pages with HTML5:

2. HTML5 new elements

Header, hgroup, nav, footer, article, section, aside, these new structural elements are to tell the browser what structure the page has and what semantics the content has. Where do these names come from?

In 2005, Google analyzed more than 1 billion web pages and found class names commonly used by developers and web authors. This also led Ian Hickson - editor of the main HTML5 specification - to start thinking about these new elements.

Here are the 20 most popular class names at the time:

footer menu title small text content header nav copyright button main search msonormal date smalltext body style1 top white link

Some class names are used for display (such as white, style1, msonnormal), while others form elements in the HTML5 specification (footer, nav, header).

Why use these new elements? HTML5 lets you provide semantics to your content.

2.1 header

The header element often appears at the top of a Web page. It often contains information such as logo, website name, website navigation, etc., and it can be used multiple times on a page.

<header>
	<img alt="my site logo" src="logo.png" />
	<h1><a href="#">Index</a></h1>
</header>

The HTML5 specification mentions that the header element can contain navigation. There is no limit to only one header element per web page, and there is no requirement that the header must be at the top of the page.

If there is only one heading (h1-6) in the header, there is no need to use the header, directly using h1-6 is enough.

2.2 hgroup

This tag has been deprecated in HTML5.1.

2.3 nav

As the name suggests, the role of the nav element is to provide navigation. It is used to link to other pages within the site, or to link to other parts of a page.

In many cases, developers write navigation using unordered lists:

<ul id="nav">
	<li><a href="#">Index</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">News</a></li>
</ul>

In HTML5, when creating nav elements, not much has changed:

<nav>
	<ul id="nav">
		<li><a href="#">Index</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">News</a></li>
	</ul>
</nav>

You can also put the nav element in the header because the header element allows for introductory and navigational content.

<header>
	<h1>Title</h1>
	<nav>
		<li>Index</li>
	</nav>
</header>

Using the nav element can effectively improve accessibility. Assistive technologies such as screen readers can search and use these navigation groups immediately without waiting for the page to fully load.

2.4 article

The article element is an independent content block that can exist independently or be reused. The content of RSS subscription is very representative.

The HTML5 specification gives some examples of how to use the article element: a forum post, a magazine or news article, a blog post, or a user-submitted comment.

<article>
	<header>
		<h1>新年大事记</h1>
		<p>12.01.01</p>
	</header>
	<p>一个段落</p>
	<p>一个段落</p>
</article>

The HTML5 specification says that article represents "an independent part of content", and even blog comment content can be represented by it.

2.5 section grouping content

The section element is a content area or page area that always requires a title. You can use it to combine the content of multiple parts, or you can further divide a part of the content according to your needs.

It cannot be used as a generic wrapper for styling requirements

The section element can contain article, and the article element can also continue to divide the content into several sections.

<h1>News</h1>
	<section>
		<h1>运动新闻</h1>
		<p>小标题</p>
	<section>
	<section>
		<h1>财经新闻</h1>
		<p>小标题</p>
	<section>
		<section>
		<h1>娱乐新闻</h1>
		<p>小标题</p>
	<section>
</h1>

The choice of article and section

At present, the use of section and div is very similar, but unlike div, section has semantics, which is a combination of a group of related content.

A section can contain articles, just like a news page, there is a news section, and there are different categories of news in this section.

If you think this part of the content has independent meaning, then you should use the article tag.

The HTML5 specification says: Developers are strongly advised to treat the div element as the last resort element, that is to say, only resort to it when no other element is suitable.

The div element does not carry any special semantics. If a section is used, it will be added to the document outline, indicating that it is important. On the contrary, div cannot be added to the outline. If the section is only used to set styles, it is better to use div.

2.6 aside

The aside tag represents a group of content that is closely related to the surrounding content, such as a list of popular articles, categories of blog posts, and recent comments. This kind of content is related to the content of the home page, but exists independently because of it.

To use aside correctly depends on its location.

In the article, the content of aside must be closely related to the content of the article, such as the glossary
If it is placed outside the article or section, its content should be related to the entire page, such as related links, advertisements, etc.
```
  <aside>
  	<h2>相关链接</h2>
  	<nav>
  		<ul>
  			<li>1</li>
  			<li>2</li>
  			<li>3</li>
  		</ul>
  	</nav>
  </aside>
```
2.7 footer

As the name suggests, the footer element is usually located at the bottom of the page. But this is not the case, the footer element is intended to contain information such as author, website owner, copyright data, website rules and regulations, etc. If it's in a section or article, it contains the date the article was published, tags, categories, and other metadata.
```
<footer>
	<small>&copy; Copyright 2016-2017</small>
<footer>
```
As mentioned in the HTML5 specification, the footer element can contain links to related documents, and can also contain other links, such as "previous article", "next article" links, etc.