HTML semantics and some simple optimizations

1. What is semantics?

  Explanation from Bing Online Dictionary

Semantic refers to using reasonable HTML tags and their 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 work well Analysis, use what kind of tags 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;

It is beneficial to SEO, allowing search engines and crawler software to crawl more useful information, build indexes, and obtain higher weights;

It is convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;

3. The semantics of HTML5

The latest HTML5 adds a systematic structure to the structuring of web pages. tag

Structure:

<header>头部</header>
<nav>导航</nav>
<article>
    <section>内容1</section>
    <section>内容2</section>
    <section>内容3</section>
</article>
<aside>侧边栏</aside>
<footer>底部</footer>

4. Points to note when writing HTML

tag closure >, />;

Use tag nesting correctly to avoid inline elements surrounding block elements;

Use tags reasonably, Use as few semantic tags as div and span as possible so that the page can present a good content structure even when the css file is not loaded successfully;

Use

,

,

,

,

,

as titles, and use them based on importance Decreasingly,

is the highest level;

Use

to distinguish paragraphs and avoid using
line breaks;

Do not use pure style tags, b, font, u, etc., instead use css settings;

When using tables, use ,

, surround the head, main content, and tables;

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

Document types use HTML5 doctype ；

meta tag optimization, mainly including title, description, keywords. Do not use " />" at the end, you should write ">" directly;

It is best to use a css file , placed inside the header

tag;

js files are best placed at the bottom to avoid blocking the rendering of HTML due to loading js files;

Use external files to avoid writing css and js code directly in HTML;

Introduction Use absolute addresses for files. The absolute addresses include the domain name of the website;

img tag plus alt keyword is conducive to SEO optimization. Try not to use "of", "up", "good", "etc.", etc. when searching Words that are not included in the engine database by default; add the h1 tag to the

logo. The search engine defaults to the h1 tag. This title is the most important information in the web page, so we put the most important information in the

tag;

About the html web page Whether it meets the standards, you can check it on this webpage and directly enter the link to view the inspection results

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