How to Semantize and Optimize HTML

This time I will bring you how to do semanticization and optimize HTML, what are the notes for doing good semantics and optimizing HTML, the following are practical cases, let's come together take a look.

1. What is semantics?

Bing Online Dictionary’s Explanation

Semanticization 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 so that machines can understand it. Semantic (X)HTML documents can help improve the usability of your website for visitors, such as using a PDA , text browsers, and people with disabilities will benefit. 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.

Simply put, it is based on the structure of the content (content semantics), selecting appropriate tags (code semantics) to facilitate developers to read and write more elegant code, while allowing browser crawlers and The machine parses it very well, and uses 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 capture 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 is about structuring web pages Added a system of structured tags

Header

Navigation

                                                                                                                                              3

Sidebar

Bottom

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 unsemantic 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

,

,

,

,

,

, are used as titles, and in descending order of importance,

is the highest level;

Use

to distinguish paragraphs and avoid using
line breaks;

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

When using

table

, use , , to surround the head, main content, and table;

5. Regarding SEO optimization, HTML needs to be done What? Document types use HTML5 doctype ;

meta tag optimization, mainly including title, description, keywords, do not use "/>" at the end, it should Write ">" directly;

It is best to use one for the css file and place it in the header tag;

It is best to place the js file at the bottom to avoid loading the js file Block the rendering of HTML;

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

Use absolute addresses when introducing files, and the absolute addresses include the domain name of the website;

img tag

Add alt keywords, which is beneficial to SEO optimization. Try not to use "of", "up", "good", "etc.", etc., which are not included in the search engine database by default. Words;

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; I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to use h5’s sse server to send EventSource events

How to implement the remember password function in h5

How to implement drag and drop in H5

The above is the detailed content of How to Semantize and Optimize HTML. For more information, please follow other related articles on the PHP Chinese website!