HTML semantics and some simple optimizations

1. What is semantics?

Explanation of Bing Online Dictionary

Semantic refers to using reasonable HTML tags and its unique attributes to format document content. In layman's terms, semantics is the processing of data and information to make it understandable by machines. Semantic (X)HTML documents help improve the usability of your website for visitors, such as those using PDAs, text browsers, and people with disabilities people will benefit from it. For search engines or crawler software, it helps them build indexes and may give a higher weight. In fact, one of the most effective methods for SEO is to reconstruct the HTML structure of the web page, which is essentially semantics.

　To put it simply, it is based on the structure of the content (content semantics), choosing appropriate tags (code semantics) to facilitate developers to read and write more elegant code, while allowing browser crawlers and machines to parse it well. , what kind of tags should be used for what kind of content.

2. What are the benefits of semantics?

• The page can also present a good content structure even when the css file is not loaded successfully;
• Conducive to SEO, allowing search engines and crawler software to crawl more useful information, build indexes, and obtain higher weights;
• Convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;

3. Semanticization of HTML5

The latest HTML5 adds a system of structured tags to the structuring of web pages

Structure:

<span style="color: #0000ff;"><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>头部<span style="color: #0000ff;"></span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>导航<span style="color: #0000ff;"></span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>内容1<span style="color: #0000ff;"></span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>内容2<span style="color: #0000ff;"></span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>内容3<span style="color: #0000ff;"></span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span>侧边栏<span style="color: #0000ff;"></span><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>底部<span style="color: #0000ff;"></span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>

　

4. Things you need to pay attention to when writing HTML

• Tag closure >, />;
• Use tag nesting correctly to avoid inline elements surrounding block elements;
• Use tags reasonably and use as few semantic tags as div and span as much as possible. The page can also present a good content structure even when the css file is not loaded successfully;
• Use

  ,

  ,

  ,

  ,

  ,

  as titles, and in descending order of importance,

  is the highest level ;

• Use

  to distinguish paragraphs and avoid using
  line breaks;

• Don’t use pure style tags, b, font, u, etc., change to css settings;
• When using tables, use , , to surround the head, body content, and tables;

  5. Regarding SEO optimization, what needs to be done with HTML?

  • Document types use HTML5 doctype ;
  • Meta tag optimization mainly includes three places: title, description, and keywords. Do not use "/>" at the end. You should write ">" directly;
  • It is best to use one css file and place it in the header tag;
  • It is best to place js files at the bottom to avoid blocking HTML rendering due to loading js files;
  • Use external files to avoid writing css and js code directly in HTML;
  • Use absolute addresses when importing files. The absolute address includes the domain name of the website;
  • The img tag plus the alt keyword is conducive to SEO optimization. Try not to use "of", "up", "good", "etc.", etc., which are not included in the search engine database by default;
  • Add the h1 tag to the logo. Search engines default to the h1 tag. This title is the most important information on the web page, so we put the most important information in the

    tag;

  As for whether the html webpage meets the standards, you can check it on this webpage and directly enter the link to view the check results

  https://validator.w3.org/nu/