Back-end Programmer's front-end road 03--html semantics

Directory

• What is HTML semantics?
• Why semantics
• Semantics of common tags

First, what is HTML semantics?

Simply put: Each label does its own thing, so that it can be read directly by the machine.

Second, why should be semantically?

1, more easily indexed by search engines.

2, convenient for other types of equipment analysis (such as: screen reader, etc.)

3, facilitate team development and maintenance.

Third, the semantics of common tags

Label	Meaning	Note
<title>	Page title	Used to tell users and search engines what the main content of this page is. Search engines can quickly determine the theme of a webpage by the title of the page.
<p>	Paragraph of the article	In the default style, there will be white space after the previous paragraph.
	Title of the article	H1 is the most important , usually used on the name of the website. These tags will make the font thicker and larger, not simply to achieve this effect and disorderly use of H tags.
<em>/<strong>	Emphasize some of the text in the article	Both labels are meant to be emphasized, but <strong> is stronger. <em> The italic effect is displayed,<strong> The bold effect is displayed.
<span>	No semantics	Its purpose is to set a separate style.
<q>	Quote shorter content from others	If you need to refer to someone else's statement in the article, use this tag. The browser automatically adds double quotes to the Q tag by default. Applies to shorter content.
<blockquote>	Quote a big paragraph of someone else's content	Also refers to the content of others, and the <q> tag is different, this applies to the case of large sections of content.
<br/>	Line break	In HTML, the carriage return and line break are ignored.
	Horizontal Dash	Used to split different paragraphs.
<address>	Contact address information for the website	The default style is displayed in italics.
<code>	Single line Code
<pre>	Pre-formatted text	The contents of the PRE tag retain carriage returns and line feeds. Typically used to display multiple lines of code.
<ul><li>	List	A list that does not contain a pre-order.
<ol><li>	Ordered list	Ordered list
<div>	Container	Used to divide a Web page into separate areas. You can match the ID and class attributes to make the HTML structure clearer.
<table>	Form	Used to show some data in a Web page. Included elements are: tbody, tr, TH, TD <TBODY>: When the table has a lot of content, the table will download a little bit, and if you add tbody, it will only be displayed when all the tables have been downloaded. <tr>: Row of table <th>: Table header, default is bold, and centered. <td>: A cell in a table
<caption>	Summary information for the table	Summary information is not displayed in the browser. Its role is to increase the readability of the table, so that the search engine better understand the table content.
<a>	Hypertext links
	Image	Several main attributes: SRC, alt, title SRC: Identifies the location of the image Alt: Alternate text when a picture download fails Title: Text displayed when the mouse slides over a picture

Back-end Programmer's front-end road 03--html semantics