Article introduction of Wulin.com (www.vevb.com): A web page is like a house, the HTML structure is walls one by one, and the tags are bricks. The bricks must be placed in an orderly and neat manner so that the walls will be firm. Finally, the css is the decorative material, and it depends on her whether it is beautiful or not. Therefore, we need to have an excellent web page, which not only provides a clean and clear structure HTML, but also inseparable from the ultimate beautification of css.
Some time ago, when browsing online, I found that the front-end development recruitment questions of several domestic Internet giant companies still mentioned a problem of label semantics. This topic is already a cliché, but there are still many problems. It comes down to a habit. I am too lazy when I have time, so I just write code without considering it. I know I was wrong! Children's shoes, we have to make label semantics a habit! Today, I will popularize the semantics of labels and encourage myself not to be confused all day long!
In web design, we often hear the term tag semanticization. The design thinking of HTML tag semanticization is actually to use the most appropriate and appropriate tag for a certain piece of content. In this way, no matter who it is, you can understand what this piece of content is.
A web page is like a house. The HTML structure is walls one by one, and the tags are bricks. The bricks must be placed in an orderly and neat manner so that the walls will be firm. Finally, the css is the decorative material, and it depends on her whether it is beautiful or not. Therefore, we need to have an excellent web page, which not only provides a clean and clear structure HTML, but also inseparable from the ultimate beautification of css.
The above also shows that tag semantics are extremely important. Each tag in HTML has its own semantics and its own scope of application. But it is often ignored or abused by us. For example: in a page, there are dozens or even hundreds of them. This is a meaningless tag, which only represents a layer, which is very unfavorable for later maintenance; while the <table> tag is a data tag, and when it is time to use it, we must use it boldly.
Benefits of tag semanticsThere are countless reasons for you to use tag semantics:
HTML tag semantics summaryIn order to use tag semantics faster and better, the following form lists all HTML tags and tag descriptions. The following list is arranged alphabetically, where new: is the new tag in HTML5.
Tag description
<!-…->Define comments.
<!DOCTYPE> defines the document type.
<a>Define the hyperlink.
<abbr>Define the abbreviation.
<acronym>Not supported in HTML 5. Define the acronym.
<address> defines the address element.
<applet> is not supported in HTML 5. Define applet.
<area>Defines the area in the image map.
<article>Define article.
<aside> defines content outside the page content.
<audio>Defines the sound content.
<b>Define bold text.
<base> defines the base URL for all links in the page.
<basefont>Not supported in HTML 5. Please use CSS instead.
<bdi>Define the text orientation of the text so that it is set from the direction of the surrounding text.
<bdo>Define the direction of text display.
<big>Not supported in HTML 5. Define large text.
<blockquote>Define long references.
<body> defines the body element.
<br>Insert line breaks.
<button> defines the button.
<canvas> defines the graph.
<caption> defines the table title.
<center>HTML 5 is not supported. Defines the centered text.
<cite> defines a reference.
<code>Defines the computer code text.
<col> defines the properties of a table column.
<colgroup> defines the grouping of table columns.
<command> defines the command button.
<datalist> defines the drop-down list.
<dd>Define the description of the definition.
<del> defines delete text.
<details> defines the details of the element.
<dfn> definition defines the project.
<dir>Not supported in HTML 5. Define a directory list.
<div> defines a part of the document.
<dl>Definition definition list.
<dt> defines the defined item.
<em>Definition emphasizes text.
<embed>Define external interactive content or plug-in.
<fieldset> defines fieldset.
<figcaption> defines the title of the figure element.
<figure> defines the grouping of media content, as well as their titles.
<font>Not supported in HTML 5.
<footer> defines the footer of section or page.
<form> defines the form.
<frame>HTML 5 is not supported. Defines a subwindow (frame).
<frameset> is not supported in HTML 5. Defines the set of frameworks.
<h1> to <h6>Define title 1 to title 6.
<head>Defines information about the document.
<header> defines the header of section or page.
<hgroup> defines information about sections in the document.
<hr>Define the horizontal line.
<html>Define the html document.
<i>Define italic text.
<iframe> defines the child window (frame) within the row.
<img>Define the image.
<input> defines the input field.
<ins> defines the insert text.
<keygen> defines the generated key.
<isindex> is not supported in HTML 5. Defines the input field for a single line.
<kbd> defines keyboard text.
<label> defines the label of the form control.
<legend> defines the title in the fieldset.
<li>Define the item of the list.
<link> defines resource reference.
<map>Define image map.
<mark>Defines marked text.
<menu>Define menu list.
<meta> defines meta information.
<meter> defines the metric within the predefined range.
<nav>Define navigation links.
<noframes> is not supported in HTML 5. Define the noframe part.
<noscript> defines the noscript part.
<object> defines the embedded object.
<ol> defines an ordered list.
<optgroup> defines the option group.
<option> defines the options in the drop-down list.
<output> defines some types of output.
<p>Define paragraphs.
<param> defines parameters for the object.
<pre>Define preformatted text.
<progress> defines the progress of any type of task.
<q> defines short references.
<rp>Define content displayed by the ruby element if the browser does not support the browser.
<rt>Defines the explanation of ruby comments.
<ruby> defines ruby comments.
<s>Not supported in HTML 5. Defines text with strikethrough.
<samp>Define sample computer code.
<script> defines script.
<section> defines section.
<select> defines an optional list.
<small> render side comments as small text.
<source> defines the media source.
<span>Defines the section in the document.
<strike> is not supported in HTML 5. Defines text with strikethrough.
<strong>Definition emphasizes text.
<style> defines the style definition.
<sub> defines subscript text.
<summary> defines the title of the details element.
<sup>Define superscript text.
<table> defines the table.
<tbody> defines the body of the table.
<td> defines the table cell.
<textarea>Define textarea.
<tfoot>Defines the footnotes of the table.
<th> defines the header.
<head> defines the header.
<time>Define date/time.
<title>Defines the title of the document.
<tr>Defines table rows.
<track>Defines the text track used in the media player.
<tt>Not supported in HTML 5. Define typewriter text.
<u>Not supported in HTML 5. Define underlined text.
<ul>Define an unordered list.
<var> defines the variable.
<video> defines video.
<xmp>Not supported in HTML 5. Define preformatted text.