A brief discussion on the semantics of HTML and some simple optimizations
|
1. What is semanticization? Explanation of Bing Dictionary Semanticization refers to the use of 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 help improve the usability of your website for visitors, such as those using PDAs, text browsers, and people with disabilities. For search engines or crawler software, it helps them build indexes and may give them a higher weight. In fact, one of the most effective ways to improve SEO is to reconstruct the HTML structure of a web page, which is essentially semanticization. Simply put, it is to choose appropriate tags (code semantics) according to the structure of the content (content semantics) to make it easier for developers to read and write more elegant code while allowing browser crawlers and machines to parse it well. Use appropriate tags for different content. 2. What are the benefits of semantics? The page can present a good content structure even when the CSS file is not successfully loaded; it is good for SEO, allowing search engines and crawlers 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) and render web pages in a meaningful way;3. Semanticization of HTML5 The latest HTML5 adds a system of structured tags to the web page structure
structure: XML/HTML CodeCopy content to clipboard
4. Things to note when writing HTML Tag closing</>, />; Use tag nesting correctly to avoid inline elements surrounding block elements; Use tags reasonably and use as few non-semantic tags as possible, such as div and span, so that the page can present a good content structure even when the CSS file is not loaded successfully; Use <h1>, <h2>, <h3>, <h4>, <h5>, <h6> as titles, in descending order of importance, with <h1> being the highest level; Use <p> to separate paragraphs and avoid using <br /> to break lines; Do not use pure style tags, such as b, font, u, etc., but use CSS settings instead; When using a table, use <thead>, <tbody>, and <tfoot> to surround the header, body content, and table; 5. Regarding SEO optimization, what does HTML need to do? The document type uniformly uses HTML5 doctype <!DOCTYPE HTML>; Meta tag optimization mainly includes title, description, and keywords. Do not use " />" at the end, but write ">" directly; It is best to use one css file and put it in the <head> tag; It is best to put the js file at the bottom to avoid blocking the rendering of HTML due to loading the js file; Use external files to avoid writing CSS and JS codes directly in HTML; Use an absolute address when importing files. The absolute address includes the domain name of the website. Adding alt keywords to the img tag is good for SEO optimization. Try not to use words like "的", "上", "好", "等", etc., which are not included in the search engine database by default. Add an h1 tag to the logo. Search engines assume that the h1 tag is the most important information on the web page, so we put the most important information in the <H1> tag. You can check whether the HTML webpage meets the standards on this webpage. Simply enter the link to view the inspection results. https://validator.w3.org/nu/ The above is all the content of the editor's brief discussion on the semantics of HTML and some simple optimizations. I hope everyone will support 123WORDPRESS.COM~ |
<<: The browser caches the relevant http headers to minimize the number of http requests
>>: Analyzing ab performance test results under Apache
Recommend
MySQL fuzzy query statement collection
SQL fuzzy query statement The general fuzzy state...
Briefly describe mysql monitoring group replication
Original text: https://dev.mysql.com/doc/refman/8...
How to support full Unicode in MySQL/MariaDB
Table of contents Introduction to utf8mb4 UTF8 by...
Detailed explanation of querying JSON format fields in MySQL
During the work development process, a requiremen...
CSS Skills Collection - Classics among Classics
Remove the dotted box on the link Copy code The co...
How to view version information in Linux
How to view version information under Linux, incl...
Dissecting the advantages of class over id when annotating HTML elements
There are very complex HTML structures in web pag...
How the Linux kernel breaks into the process address space and modifies the process memory
Isolation of process address spaces is a notable ...
Detailed explanation of moment.js time and date processing
Monday to Sunday time format conversion (Y --- ye...
Incredible CSS navigation bar underline following effect
The first cutter in China github.com/chokcoco Fir...
Detailed explanation of Docker basic network configuration
External Access Randomly map ports Using the -P f...
Summary of MySQL ALTER command knowledge points
When we need to change the table name or modify t...
Simple usage example of MySQL 8.0 recursive query
Preface This article uses the new features of MyS...
How to modify the initial password of MySQL on MAC
Problem description: I bought a Mac and installed...
CSS Summary Notes: Examples of Transformations, Transitions, and Animations
1. Transition Transition property usage: transiti...