The semantic Web

Speaking of HTML semantics, we can first talk about Web semantics, and the so-called Web semantics, in fact, the use of appropriate semantic HTML tags and CSS class content, so that the page has good semantics and structure, so that humans and machines can quickly understand the content of the Web. Its core content can be summarized as the following four points:

  • Do the right thing with the right label
  • Page content structure
  • Web pages can be read without CSS
  • Convenient browser, search engine parsing, conducive to SEO

Now that we know about Web semantics, we can talk about HTML semantics.

Semantic HTML

The core of HTML semantics is to oppose the use of large length of non-semantic div + CSS + SPAN, and to encourage the use of semantic tags defined by HTML. What we should care about then is the semantics of the tag and the context in which it should be used.

header

Header indicates the header of a page or section, usually containing h1 to H6 or Hgroup.

(Tip: Although the W3C specification states that headers can exist in one or more pages, headers are usually suitable for wrapping content that is complex and contains multiple navigation and menus.)

hgroup

Hgroup represents the title group of a web page or section. Usually, hgroup is used to wrap H1 to H6 only when there are multiple H1 to H6.

footer

Footer represents the footer of a page or section. It usually contains some basic information, such as the author, links to relevant documents, copyright materials, etc.

nav

Represents the navigation link area of the page.

(Tip: The specification says nav only applies to the main navigation section of the page.)

article

Represents a self-contained piece of content in a web page that is intended to be developed independently or by developers. Usually you need to have a header/ H1 to h6 and a footer.

(Tip: If an article is nested inside it, it means that the embedded article is related to its external content, such as the comments below the article.)

section

Represents a section or segment in a document. Usually, the value must contain H1 to H6.

(Tip: Although section headings are automatically degraded in HTML5, it is recommended to downgrade them manually.)

aside

Represents a separate content area. Commonly used in two cases:

  • In article: something that is attached to the main content
  • Outside of article: The most typical use is the sidebar

At this point, I believe that THE semantics of HTML have been roughly explained. Let’s talk about CSS semantics.

CSS semantic

If THE semantics of HTML is for machines, then the semantics of CSS naming is for people.

In normal development, CSS naming should first meet the W3C naming conventions and team naming conventions, and then be efficient and reusable. At this point, a contradiction appears, as shown in the code:

<div class="page">
  <div class="header">
    <div class="header-title" title-levle="1">Page Title</div>
  </div>
  <div class="content">
    <div class="artical">
      <div class="artical-title">Artical Title</div>
      <div class="artical-txt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, quisquam animi. Placeat
        dicta alias natus quibusdam quia corrupti quos nesciunt odio, cumque iste. Minima odio
        perspiciatis fuga dolorum sint maiores!
      </div>
      <div class="artical-footer">
        author:xxx
      </div>
    </div>
  </div>
  <div class="footer">
    Contact:123123
  </div>
</div>
Copy the code

The above code, class structure is clear, I believe for developers, must be able to quickly understand the structure of the web page. Should we just standardize class naming in daily development?

In fact, this is not the case. As mentioned earlier, HTML semantics is mainly for the machine to read, the above code for browsers and search engines, just a bunch of semantic div, very bad for SEO.

Therefore, in daily development, it is important to pay attention to both HTML and CSS semantics. Of course, a lot of div + CSS + SPAN can also get the job done, but it also shows that we developers are not professional.

Development: ARIA

ARIA stands for Accessible Rich Internet Application, Chinese translation for barrier-free Rich Internet Application. Its main purpose is to provide barrier-free access to dynamic, interactive Web content for people with functional impairments (such as hearing and vision) through screen readers such as Voiceover.

There are two key attributes that apply to HTML:

  • Role: Identifies the role of an element
  • Aria -* : Describes the features and states of things associated with it

Reference documentation

How to understand Web semantics

Semantic HTML