The semantics of HTML and some simple optimizations

1. What is semantics?

Explanation of the Bing Internet code

Semantics refers to formatting the contents of a document with a reasonable HTML tag and its unique attributes. In layman's words, semantics is the processing of data and information, making the machine understandable. Semantic (X) HTML documents can help improve the usability of your site to visitors, such as using PDAs, text browsers, and people with disabilities to benefit from. For search engines or crawlers, it helps them to index and may give a higher weight. In fact, one of the most effective SEO method is to reconstruct the HTML structure of the Web page, which is essentially semantic.

Simply put, it is based on the structure of the content (content semantics), choose the appropriate tags (code semantics) for developers to read and write more elegant code, while the browser crawler and machine very well parse, what kind of content to use what kind of tag.

2. What are the benefits of semantics?

• When the CSS file does not load successfully, the page can also present a good content structure;
• Facilitates SEO, lets the search engine and the crawler software crawl More useful information, builds the index, obtains the higher weight value;
• facilitates other device parsing (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;

3. Semantics of HTML5

The latest HTML5 adds a structured label to the structure of the Web page

Structure:

<Header>Head</Header><nav>Navigation</nav><article>    < Section>Content 1</ Section>    < Section>Content 2</ Section>    < Section>Content 3</ Section></article><aside>Side bar</aside><Footer>Bottom</Footer>

　　

4, the point to write HTML attention

• Label Closure </>,/>;
• Use tag nesting correctly to avoid enclosing elements in the inline element;
• Reasonable use of tags, as little as possible to use the non-semantic label div,span, the CSS file does not load successfully when the page can also present a good content structure;
• Use
• Use <p> to distinguish between paragraphs, avoid <br/> with line breaks;
• Do not use the pure style of the label, B,font,u, etc., changed to CSS settings;
• When using the form, use <thead>,<tbody>,<tfoot> surround the head, main content, table;

5, about SEO optimization, HTML needs to do?

• Document type Unified use HTML5 DOCTYPE <! DOCTYPE html>;
• Meta tag optimization, mainly has title, description, keywords three places, end do not use "/>", should directly write ">";
• CSS files preferably use one, placed in the head
• JS files are best placed at the bottom, to avoid loading JS file block HTML rendering;
• Use an external file to avoid writing CSS and JS code directly in HTML;
• An absolute address is used when the file is introduced, and the absolute address includes the domain name of the website;
• IMG tag plus alt keyword, SEO optimization, try not to use the ",", "good", "and so on", search engine database is not included in the default word;
• Logo plus h1 tag, search engine default H1 label This title is the most important information in the Web page, so we put the most important information into the <H1> tag;

about whether the HTML page conforms to the standard, you can check this page, directly enter the link to view the results of the inspection

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

The semantics of HTML and some simple optimizations