Learning objectives:

Today, we will learn more about the semantics of tags, know when and what tags they should use, and make the web page more readable, rather than a pile of meaningless tags.
And on the basis of this study, carry out practical practice and complete an online blog article.

Learning content:

Semantization is the structure of text content. Select semantic tags to facilitate developers to read, maintain and write more elegant code, so that the crawler and auxiliary technology of browsing blue flag can better analyze.

1.HTML semantics

In HTML, for example, < H1 > element is a semantic element, which gives the wrapped text the role (or meaning) of "the highest level Title Function in this page".

<h1>This is a top level heading</h1>

By default, the user agent stylesheet of most browsers will give a < H1 > element a large font size, making it look more like a title (although you can format it into any style you want), but more importantly, its semantics will be used in many places in different ways, For example, search engines will take the content it contains as an important keyword, which will affect the ranking of this page in search results, and screen readers will use it to help visually impaired users use this page better.

On the other hand, you can use CSS to make any element look like a top-level title, just like the method shown below:

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

This will render the element as a top-level title, but its value does not correspond to the semantics of "top-level title", so it will not get more additional description (just an ordinary "span" element rather than the semantics of "top-level title"). So it's a good idea to use the right HTML elements with the right requirements.

2. Semantic

Overview: name it based on what it is, not what it looks like or can do.
Long version explanation:
Semantic HTML is not just about the elements we use - you certainly know that a link should use < a > tags, table data should use < Table > tags, paragraphs should use < p > tags, and so on.
More importantly, it is related to the class names and IDs we added. Class names and IDs provide additional mechanisms for CSS and JavaScript, making it easier for us to manipulate and enhance HTML elements.
It is easy to add class names without thinking, but naming is particularly important in reality.
This is because people are only good at communicating with others, but they are not able to understand short and semantic abstract concepts.
Comparison of class names:

<!-- Not good -->
<div class="red pull-left">
<div class="grid row">
<div class="col-xs-4">

I can't see what this HTML code is trying to express here. You might say how it looks (like whether it should be on a small screen or a large screen), but that's all.

<!-- good -->
<div class="header">
<div class="basket">
<div class="product">
<div class="searchResults">

This code is exactly what I admire. I know exactly what this HTML stands for. Although I don't know what it should look like, I don't care. This is the value of CSS. The semantic class name is very meaningful to HTML, CSS and even JS.

3. Why should we use semantic class names?

Because it's easier to understand
If you use semantic class names, whether you are modifying HTML or CSS, you know the impact you will have. Using visual class names, you have to write a lot of class names on each element. In the end, you may just have a vague understanding of these class names without knowing what its real intention is. Moreover, visual class names are very difficult to maintain.

Because you want to build a responsive site
Generally speaking, different views have different styles. For example, you may need to float an element on the large screen and not on the small screen. If you have one named clearfix class name to clean up floating, but the effect on the small screen is different from the class name. Does this look confusing?
Using semantic class names, you will write styles based on media queries, which will make CSS easier to maintain.

Because it's easier to find
If an element is named based on its external appearance, for example red, .clearfix, and Pull left and so on, then these class names will be scattered everywhere in the code base like garbage - when you search a specific HTML code, the class name will not play any role.
In other words, if your class name is semantic enough, it's easy to search for specific code fragments. More commonly, when you search your HTML from scratch (imagine the censorship element on the browser) to find the class name, it will be much faster to find the unique CSS selector.

Because I don't want to do regression tests for no reason
If you use a descriptive, non semantic class name, when you modify one of the class names, the style change will affect each element that uses the class name. Based on your experience with CSS, can you guarantee that your modifications will not cause unpredictable problems elsewhere?
Semantic class names are unique, so when you edit one of them, you can confidently say that your modification will only affect the module you want to change, which is easier to maintain.

Because you don't have to be afraid to update the code
Related to the previous point about regression testing, when you are not confident about the modified code, you are likely to cause bugs, and then you will stop touching the code for fear of making mistakes. What's more terrible is that it will cause a vicious circle, write a lot of redundant code, and finally become less and less maintainable.

Because it helps to automate testing
Automated functional testing needs to locate specific elements, interact with them (enter text, click buttons, links, etc.), and conduct relevant verification based on these operations.
If you use descriptive class names throughout your HTML, you won't have a reliable way to locate a specific element, let alone interact with it.

Because it provides a meaningful interface for JavaScript
Just like automated testing, semantic class names are also meaningful to JavaScript. Descriptive class names are unreliable and cannot be used to locate corresponding modules or components.

Because of concerns about routine maintenance
If you name the element based on what it is, you don't have to change the HTML class name again. For example, heading is always heading. You don't care what it looks like.
The style may change, but you just need to change your CSS. On the other hand, this is actually loose coupling, which improves maintainability.

Because it is difficult to debug non semantic class names
When you debug an element, there will be many similar CSS selectors, which increases the difficulty of debugging.

Because the standard is recommended
The HTML5 specification says that the class name attribute is used.
"[...] encourage the use of class names that can describe the essence of content, rather than values that only describe its external appearance."

Because it can improve performance
This is a very small advantage, because when you have only one class name for an element, your entire HTML code will be smaller. Using descriptive class names, each element has countless class names, and the result is naturally different from the former.

Because it is related to reuse rules
If you don't use semantic class names, you may misunderstand the concept of reuse and misuse reuse.

Semantic class name is the cornerstone of MaintainableCSS. Without it, everything is meaningless. So, based on what the name is, everyone else will benefit.

4. How to understand Web semantics

Web semantics refers to the use of appropriate semantic html tags, class names and other content, so that the page has a good structure and meaning, so that people and machines can quickly understand the web content. On the one hand, semantic web pages can enable machines to collect and study the information of web pages with less human intervention, so as to understand the content of web pages, and then analyze the collected information, and the results can be used by humans; On the other hand, it allows developers to understand the structure and users, and screen readers (if visitors are visually impaired) to understand the content.
In short, it is conducive to SEO, easy to read, maintain and understand.

5. Semantic elements

Semantic element = meaningful element.

(1) What are semantic elements?

The semantic element clearly describes its meaning to browsers and developers.
Examples of non semantic elements: < div > and < span > do not explain its content.
Examples of semantic elements: < form >, < Table > and < article > clearly define their contents.

In HTML, there are some semantic elements that can be used to define different parts of a web page:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

(2)HTML <section> Element

The < section > element defines a part of the document.
According to W3C's HTML document: "a section is a topic grouping of content, usually with a title."
< section > examples of elements that can be used:

• chapter
• introduce
• News items
• Contact information
  Web pages can usually be divided into introduction, content and contact information.

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

(3)HTML <article> Element

The < article > element specifies independent, self-contained content.
An article should be meaningful in itself and should be distributed independently of the rest of the website.
< article > examples where this element can be used:

• Forum post
• Blog post
• User comments
• Product card
• Newspaper article

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

The < article > element specifies independent, self-contained content.
The < section > element defines the section in the document.
Can we use definitions to decide how to nest these elements? No, we can't!
You will find that HTML pages containing < section > elements contain < article > elements, and < article > elements contain < section > elements.

(4)HTML <header> Element

The < header > element represents a container for introductory content or a set of navigation links.
A < header > element usually contains:

• < H6 - < H1 > one or more titles
• Logo or Icon
• Author information
  There can be several < header > elements in an HTML document. However, < header > cannot be placed in < footer >, < address > or another < header > element.

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

(5)HTML <footer> Element

The < footer > element defines the footer of a document or part.
A < footer > element usually contains:

• Author information
• Copyright information
• Contact information
• Site map
• Back to top link
• Relevant documents
  Multiple < footer > elements can be included in a document.

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

(6)HTML <nav> Element

The < NAV > element defines a set of navigation links.
Not all links to the document should be within the < NAV > element. This < NAV > element is only used for the main navigation link block.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

(7)HTML <aside> Element

The < aside > element defines something other than what it is in (such as a sidebar).
< aside > content should be indirectly related to the surrounding content.

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

(8)HTML <figure> and <figcaption>Element

The < figure > tag specifies self-contained content, such as illustrations, charts, photos, code lists, etc.
The < figcaption > tag defines the title of the < figure > element< The figcaption > element can be the first or last child element of the < figure > element.
The < img > element defines the actual image / illustration.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

6. Document and website architecture

(1) Basic components of the document

header
There is usually a headline and / or a logo across the top of the page. This is the main general information of the website, which usually exists in all pages.
navigation bar
Hyperlinks to major sections of the site. It is usually represented by menu buttons, links or tabs. Similar to the title bar, the navigation bar should usually be consistent among all web pages, otherwise it will make users confused or even at a loss. Many web designers believe that the navigation bar is a part of the title bar, not a separate component, but this is not absolute; Others believe that the independence of the two can provide better accessibility features, because screen readers can distinguish the two more clearly.
Main content
Most areas of the center are unique to most of the current web pages, such as videos, articles, maps, news, etc. These contents are part of the website and will vary from page to page.
sidebar
Some peripheral information, links, references, advertisements, etc. It is usually related to the main content (for example, on a news page, the sidebar may contain author information or links to related articles), and there may be other repetitive elements, such as auxiliary navigation system.
footer
A narrow area across the bottom of the page. Like the title, the footer is used to place public information (such as copyright notice or contact information). Generally, it uses a smaller font and is usually secondary content. You can also do SEO by providing quick access links.

(2) HTML for building content

In order to realize semantic markup, HTML provides special tags to clarify these sections, such as:

• < header >: header.
• < NAV >: navigation bar.
• < main >: main content. There can also be various sub content sections in the main content, which can be represented by elements such as < article >, < section > and < div >.
• < aside >: sidebar, often nested in < main >.
• < footer >: footer.

Learning output:

Effect example diagram

<!DOCTYPE html>
<html>

<head>
    <title>Article blog</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="article.css">
</head>

<body>
    <header>
        <h1>Article sharing blog</h1>
    </header>
    <p>Published in&nbsp;2020-01-06&nbsp;Collection 5&nbsp;|&nbsp;
        <span style="text-decoration: underline;">Like 20</span>&nbsp;|&nbsp;
        <a href="https://baike.baidu.com/item / water / 34133 "> more</a>
    </p>
    <main>
        <header>
            <h2>Water (colorless and tasteless transparent liquid)</h2>
        </header>
        <p>This entry is made by
            <a href="https://baike. baidu. COM / science "> review of" popular science China "science encyclopedia entry compilation and application project < / A</p>
        <p>
            <span style="font-weight: bold;">water(The chemical formula is H2O),It is an inorganic substance composed of hydrogen and oxygen,</span>Non toxic, drinkable. It is a colorless and tasteless transparent liquid under normal temperature and pressure. It is known as the source of human life and an important material to maintain life.</p>
        <!-- <br> -->
        <p style="margin-left: 100px;">Water is one of the most common substances on earth. There are 71 on the earth's surface%Covered with water.
            <span style="text-decoration: underline;">It is an important resource for all life, including inorganic compounds and human beings, and it is also the most important part of organisms.</span>Pure water has very weak conductivity and belongs to very weak electrolyte. Water in daily life has more yin and yang ions due to the dissolution of other electrolytes, so it has obvious conductivity.
            <sup>[1]</sup>
        </p>
        <p style="margin-left: 60px;">—Chief editor Qi Huanyu.
            <i>Preparation and processing of photovoltaic materials[M]</i>.2015 Page 40</p>
        <img src="water.jpeg" alt="Water molecular structure diagram" class="water">
        <p style="margin-left: 60px;">Schematic diagram of water molecular structure</p>
        <header>
            <h3>Water has many important functions in the body</h3>
        </header>
        <ul>
            <li>(1)Water is an important component of cell protoplasm;<sup>[4]</sup></li>
            <li>(2)Water acts as a solvent in the body and dissolves a variety of electrolytes;<sup>[4]</sup></li>
            <li>(3)Water can transport nutrients, metabolic wastes and endocrine substances (such as hormones) in the body;<sup>[4]</sup></li>
        </ul>
        <header>
            <h3>Heavy water list</h3>
        </header>
        <table cellpadding="0";cellspacing="0">
            <tr>
                <td>nature</td>
                <td>H<sup>2</sup>O</td>
                <td>D<sup>2</sup>O</td>
            </tr>
            <tr>
                <td>Relative density (20)℃)</td>
                <td>0.997</td>
                <td>1.108</td>
            </tr>
            <tr>
                <td>freezing point/℃</td>
                <td>0.00</td>
                <td>3.79</td>
            </tr>
            <tr>
                <td>Heat of evaporation/(kJ·mol-1)</td>
                <td>40.67</td>
                <td>41.6</td>
            </tr>
        </table>
        <p>The main purpose of heavy water is to act as "deceleration agent" in nuclear reactor, reduce neutron velocity, control nuclear fission process and coolant. Heavy water and deuterium are valuable tracer materials in the study of chemical and physiological changes. For example, if dilute heavy water is used to irrigate trees, it can be measured that water can run more than ten meters to tens of meters per hour in these plants. By measuring the deuterium content in the urine of people who have drunk a lot of dilute heavy water, it is known that the average residence time of water molecules in the human body is 14 days. Using deuterium instead of ordinary hydrogen can study the digestion and metabolism of animals and plants. Concentrated or pure heavy water cannot maintain the life of animals and plants, and the lethal concentration of heavy water to general animals and plants is 60%.  [6] There are many methods to produce heavy water, such as electrolysis and water rectification, which are now used H2S/H2O In the double temperature exchange method, the heavy water is enriched for about 15 minutes%After that, Electrolytic Enrichment 99.8%，This method is cheap</p>
        <header>
            <h3>Seawater desalination</h3>
        </header>
        <p>Seawater desalination, also known as seawater desalination, is the technology and process of obtaining fresh water from seawater. Taking fresh water from seawater or removing salt from seawater can achieve the purpose of desalination.According to the classification of desalination process, seawater desalination methods mainly include thermal method, membrane method and chemical method.</p>
        <dt>Multistage flash(<abbr title="Multistage Flashing Systom">MSF</abbr>)</dt>
        <dd>The so-called flash evaporation refers to the phenomenon that part of the sea water evaporates rapidly when the pressure of the sea water at a certain temperature decreases suddenly</dd>
        <dt>Low temperature multi effect distillation(<abbr title="MultipleEffectDistillation">LT-MED</abbr>)</dt>
        <dd>The so-called low temperature means that the maximum evaporation temperature of seawater in the first effect (top temperature of brine) is not higher than 70℃，This is because when the evaporation temperature is below 70℃The rate of salt crystallization in seawater on the evaporation surface will be greatly reduced, which can avoid or slow down the generation of equipment scaling.</dd>
    </main>
    <footer style="float: right;">
        <br>
        <strong>contact me at:</strong>
        <span>+1234567890&nbsp;</span>
        <strong>E-mail:</strong>
        <span>no_reply@example.com&nbsp;</span>
        <strong>github:</strong>
        <del>https://github.com/xxxxxxx</del>
        <span>(This address has expired)</span>
    </footer>
</body>
</html>

body{
    margin-top: 70px;
    margin-left: 50px;
    margin-bottom: 80px;
}
.water{
    width: 270px;
    height: 270px;
    margin-left: 60px;
    /* border-radius: 50%; */
}
table{
    border-collapse: collapse;
}
td{
    border:1px solid #ccc;
    margin: 0;
    padding: 10px;
}