Introduction to the

Heading tags, SEO, accessible reading

Ps: It’s a bit too much. I only wanted to talk about one point, but it’s too relevant, so I’m sorry.

When learning HTML tags, many tutorials only tell you how to use them without specifying what they are. Let’s start from H1 to H6 to rethink the knowledge system of HTML tags.

Its shape

Heading tags refer to h1 to H6 tags in web pages. Many students have the most basic understanding that h1 to H6 tags are from large to small. < p style=”font-size:32px”> < p style=”font-size:32px”>

Thoughtful students will say, “Maybe it’s for convenience?”

At first glance, this sounds reasonable, but scrolling through the bootstrap source code used by many websites, SCSS /_type. SCSS, you’ll see that the header is restyled in lines 3 through 26:

//
// Headings
//

h1.h2.h3.h4.h5.h6..h1..h2..h3..h4..h5..h6 {
  margin-bottom: $headings-margin-bottom;
  font-family: $headings-font-family;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $headings-color;
}

h1..h1 { @include font-size($h1-font-size); }
h2..h2 { @include font-size($h2-font-size); }
h3..h3 { @include font-size($h3-font-size); }
h4..h4 { @include font-size($h4-font-size); }
h5..h5 { @include font-size($h5-font-size); }
h6..h6 { @include font-size($h6-font-size); }

.lead {
  @include font-size($lead-font-size);
  font-weight: $lead-font-weight;
}
Copy the code

In this SCSS code, you can see that in addition to the redefinition of h1 through H6, the corresponding.h1 through.h6 class styles are also defined. This raises a new question:

  • Resets are common in developmentHeading tagsStyle, isn’t the default style defined by the browser redundant?
  • Just for ease of use, soboostrapI’m going to redefine theta.h1 到 .h6Kind of style?

To know its meaning

When Tim Berners-Lee first came up with HTML in 1991, there was no way to style pages. How the page is displayed is determined by the browser and can be changed by the user through preferences. This is similar to the most commonly used markdown, which uses the same syntax but can display different fonts depending on the Settings.

In newspaper typesetting, headlines are often placed in larger size to indicate emphasis, and other smaller sizes and page layouts are used to organize content.

So how do you differentiate the structure of a web page when it’s so dense and unstructured? Reference newspaper can use Heading tags to assemble page form, through the Heading tag can be very convenient to know the structure of the whole page:

  • H1 Is used to modify the main title of the page, usually the title of the page, the title of the article.
  • H2 represents the heading, or subheading, of a paragraph.
  • H3 represents the section title of the paragraph.
  • H4 through H6 indicate unimportant content for structural differentiation.

Another visual example is # ~ ##### in Markdown for the title. We can even read the article by looking at Markdown without rendering the page. That’s why Markdown was designed to be easy to write and read.

Through the Heading tag browser can easily read the theme structure of the entire page, and even generate directories for users to read, when there is no style is quite useful, of course, with the birth of CSS page style can be better organized, many students will forget its original intention.

Exercise: Iterate through the DOM node to generate a web page directory using the Heading tag.

A small spider

Lian Po old, still can feed.

Today, many students use

and
to organize their pages, ignoring the meaning of Heading tags. In addition to Heading tags, HTML5 also brings more semantic tags to help us organize our pages.

When it comes to SEO (search engine optimization), spiders still use these semantems and structures to understand the information on a page. After all, spiders can’t read a page by a human. They can only read it according to established rules. Open an article in Nuggets, little Sister’s Temptation, and the console selects the title of the article to see the h1 tag used:

Tell the spider what the title of the page is by organizing the page structure in h1, and the spider will also store this and find the article when searching the search engine for related terms such as little sister’s temptation. Of course, on the right side of the page is changed to the article table:

Is it very convenient for us to view the structure of the article and jump to the content?

SEO refers to search engine optimization, which simply means how to make it easier for Baidu and Google to understand and align your site.

Special group

In addition to small spiders, the use of Heading tags can also be convenient for special groups. One of the most famous people is Stephen Hawking. What would Hawking do if he wanted to browse the web?

There’s a lot of software out there that helps specific groups, like accessibility in browsers. These programs help specific groups of users navigate a page by parsing its structure. For example, listing the page contents makes it easier for special groups of users to choose, and reading the page contents makes it easier for people with visual impairment to choose and use the page.

If everyone is using

and
, special groups of users can only listen to one DOM node after another. If you are interested, you can turn on the accessibility mode to try. The auxiliary controllers most commonly used by iPhone users are actually designed for a specific demographic:

It can be seen that customization can simulate zooming and 3d rough touch, so that hawking can also use the iPhone for zooming and other special operations. Here is a big word from Hawking:

Eternity is a long time, especially at the end. — By Stephen Hawking

Fill in the pit

Now that we know why we use Heading tags, why do we define.h1 through.h6 tags in bootstrap? The answer to that question is pretty clear:

  • Really use font styles.
  • Does not destroyHeading tagsThe semantics of which make misunderstanding.

hope

If you are not only developing for enterprises or yourself, I hope you can use Heading tags and semantic tags as much as possible. In addition to bringing SEO help, it can also help special groups.

SEO related content

  • Little secret of H1 Mason
  • At the beginning of SEO experience
  • Img large
  • A thousand miles of marriage
  • Throw herself
  • Rover rule

Grow up together

In the confused city, there is always a partner to grow up together.

  • You can click on this if you want more people to see the articlegive a like.
  • If you want to inspire your mistress thereGithubGive aLittle stars.
  • If you want to communicate more with small two add wechatm353839115.

PushMeTop originally contributed to this article