Home > Article > Web Front-end > 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?
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><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><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><span style="color: #800000;">article</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><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><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><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><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><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>
4. Things you need to pay attention to when writing HTML
to distinguish paragraphs and avoid using
line breaks;
5. Regarding SEO optimization, what needs to be done with HTML?
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/