html web standards and semantic

Baidu Encyclopedia: WEB standard is not a standard, but rather a collection of standards. The main page consists of three parts: structure (Structure), performance (Presentation) and behavior (Behavior). Corresponding standard can be divided into three areas: the structure of the standard languages including XHTML and XML, the performance standard languages including CSS, standards of conduct including object models (such as the W3C DOM), ECMAScript and so on. Most of these standards (language abbreviation: W3C) drafted and released by the World Wide Web Consortium, there are some other standards organizations to develop standards, such as ECMA (European Computer Manufacturers Association) of the ECMAScript standard.

web standards
- Structured standard languages: XHTML and XML
- Performance Standards Language: CSS
- Standards of conduct: the object model (such as the W3C DOM), ECMAScript

The role of web standards: facilitate the development and maintenance of

Code Standard

Tags come in pairs :

Illegal wording

<p>这一段文本
<ul>
	<li>item
</ul>
复制代码

Legal wording

<p>这一段文本</p>
<ul>
	<li>item</li>
</ul>
复制代码

If it is not on the label alone, at last add a tag /. E.g:

天生我才必有用 <br/>
千金散尽还复来
<img src="images/moon.png" alt="moon" title="古诗配图"/>
复制代码

Lowercase elements : Unlike HTML, XHTML is case-sensitive, <title>and <TITLE>is different labels. XHTML requires all tags and attributes names must be lowercase. For example: <BODY>you must be written <body>. Inclusion case is not recognized

Properly nested : the same as XHTML requires strict structure, so all must be nested in the order illegal wording

<p><b>这是一段文本</p></b>
复制代码

Legal wording

<p><b>这是一段文本</b></p>
复制代码

Attribute values need quotes

In HTML, you may not need to attribute value in quotes, but in XHTML, must be quoted illegal wording

<img src=images/picture.png />
复制代码

Legal wording

<img src="images/picture.png" />
复制代码

All property assignment

XHTML requires all attributes must have a value, no value would repeat itself

Illegal wording

<td nowrap>data<td>
<input type="checkbox" checked>
复制代码

Legal wording

<td nowrap="nwrap">data<td>
<input type="checkbox" checked="checked">
复制代码

With a non-reusable id selector

Correct tab order

JavaScript wording

Illegal wording

<script language="javascript"></script>
复制代码

Correct wording

<script type="text/javascript"></script>
<script language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
复制代码

Add text image tag alt = "Description" illegal wording

<img src="bg.gif" height="50" border="0" />
复制代码

Legal writing

<img src="bg.gif" height="50" border="0" alt="说明文字" />
复制代码

Background music is not allowed<bgsound>

Do not use frame labels<iframe>

Notes text can not contain --symbols

The proper use of CSS style sheets

<link>Or <style>must be placed <head></head>between the

Non-label portion of the coded representation symbols, the symbols comprising the encoding said form must

<To <represent >to >represent &to &represent

html semantic

So that while the browser based structured content (semantic content), select the appropriate tag (code semantics) for developers to read and write more elegantly reptiles and machines well resolved.

html semantic role:

Also a good presentation when no page structure css styles
Improve the user experience
Conducive to search engine optimization (SEO)
Other convenient analytical device (mobile device, blind readers, screen readers)
Web page source code more readable, easy to develop and maintain

Semantic tags

Common semantic label comprises:

<header></header>

<nav></nav>

<section></section>

<main></main>

<artical></artical>

<aside></aside>

<footer></footer>

E.g:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>#title</title>
</head>
<body>
<header>
	<nav>头部导航栏</nav>
</header>
<main>
	<aside>侧边栏</aside>
	<section>
		<article>主要部分的文章</article>
	</section>
</main>
<footer>页脚</footer>
</body>
</html>
复制代码

Reproduced in: https: //juejin.im/post/5cf9cfa06fb9a07ecc447694