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
Detailed description of ffmpeg Chinese parameters
FFMPEG 3.4.1 version parameter details Usage: ffm...
Introduction to MySQL MHA operation status monitoring
Table of contents 1. Project Description 1.1 Back...
MySQL query syntax summary
Preface: This article mainly introduces the query...
Multiple ways to insert SVG into HTML pages
SVG (Scalable Vector Graphics) is an image format...
The whole process of developing a Google plug-in with vue+element
Simple function: Click the plug-in icon in the up...
Detailed explanation of the use of custom parameters in MySQL
MySQL variables include system variables and syst...
Trash-Cli: Command-line Recycle Bin Tool on Linux
I believe everyone is familiar with the trashcan,...
How to use tinymce in vue3.0+ and implement the function of uploading multiple images and file upload formula editing
Related Documents Part of this article is referen...
Detailed explanation of how to use awk in Linux
Before learning awk, we should have learned sed, ...
Vue encapsulation component tool $attrs, $listeners usage
Table of contents Preface $attrs example: $listen...
js realizes shopping cart addition and subtraction and price calculation functions
This article shares the specific code of js to re...
Implementation of Docker cross-host network (overlay)
1. Docker cross-host communication Docker cross-h...
How to configure NAS on Windows Server 2019
Preface This tutorial installs the latest version...
How to get datetime data in mysql, followed by .0
The data type of MySQL is datetime. The data stor...
The difference between redundant and duplicate indexes in MySQL
MySQL allows you to create multiple indexes on a ...