HTML semantics and some simple optimizations, html semantic Optimization

HTML semantics and some simple optimizations, html semantic Optimization

 

1. What is semantics?

Bing Diandian's explanation

Semantics refers to formatting document content with a reasonable HTML Tag and its unique attributes. In layman's terms, semantics is to process data and information so that machines can understand it. semantic (X) HTML documents help improve your website's ease of use for visitors, such as using PDAs, text browsers, and people with disabilities. For search engines or crawler software, it is helpful to index them and may give a higher weight. In fact, the most effective way for SEO is to reconstruct the HTML structure of a webpage, which is essentially semantic.

Simply put, it is to select appropriate labels (Code semantics) based on the content structure (content semantics) this makes it easy for developers to read and write more elegant code, while allowing Web crawlers and machines to better parse the content.

 

2. What are the benefits of semantics?

• The page can also display a good content structure when the css file is not loaded successfully;
• This is conducive to SEO, allowing search engines and crawler software to capture more useful information, create indexes, and obtain higher weights;
• Facilitate the analysis of other devices (such as screen readers, blind readers, and mobile devices) to render webpages in a meaningful manner;

 

3. semantic HTML5

The latest HTML5 adds a system of structured tags for structured web pages.

Structure:

<Header> header 
　　
4. Notes for writing HTML

 

 
  
Tag closure </>,/>;
 
  
Correct use of label nesting to prevent block elements from being surrounded by intra-row elements;
 
  
Use tags reasonably and use as few as possible the diveer div and span labels. When the css file is not loaded successfully, the page can also display a good content structure;
 
  
Use  
  
Use <p> to differentiate paragraphs to avoid using <br/> line breaks;
 
  
Do not use pure style labels, such as B, font, and u. Change them to css settings;
 
  
When using a table, use <thead>, <tbody>, <tfoot> to enclose the header, body content, and table;

 
 
5. What should HTML do for SEO optimization?

 

 
  
Use HTML5 doctype for all document types <! Doctype html>;
 
  
Meta tag optimization involves three parts: title, description, and keywords. do not end with "/>". You should directly write "> ";
 
  
It is best to use one css file and put it in the header  
  
It is best to place js files at the bottom to avoid blocking HTML Rendering due to loading js files;
 
  
Avoid writing css and js Code directly in HTML by using external files;
 
  
Use an absolute address when introducing a file. The absolute address includes the Domain Name of the website;
 
  
The img tag is labeled with the alt keyword, which is conducive to SEO optimization. Do not use "on", "good", "etc.". Words not included in the search engine database by default;
 
  
The h1 tag is added to the logo. By default, the title of h1 tag is the most important information on the webpage. Therefore, we add the most important information to the <H1> tag;

 
 
If the html webpage meets the standards, you can check the webpage and enter a link to view the inspection result.
Https://validator.w3.org/nu/