HTML5 ドキュメントタイプ宣言を使用することをお勧めします: 。
(HTML を text/html 形式で使用することをお勧めします。XHTML の使用は避けてください。XHTML とそのapplication/xhtml+xml などの属性では、ブラウザーでのアプリケーションのサポートと最適化スペースが非常に限られています)。
HTML 内のコンテンツのない要素 [1] のタグは閉じないことをお勧めします。たとえば、
の代わりに
を使用します。
一般に、タグを使用することをお勧めします。パフォーマンスの最適化とファイル サイズの制御を犠牲にする必要がない限り、標準仕様の検証済み HTML コードに合格することができます。
検出には W3C HTML バリデーターなどのツールを使用します。
正規化された HTML は、技術的な要件と制限を示し、HTML のより良い使用を促進する重要な品質ベースラインです。
非推奨
<title>Test</title> <article>This is only a test.
推奨
<!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
HTML5の仕様では、HTMLタグを省略できることが規定されています。ただし、可読性の観点から、タグを省略すると問題が発生する可能性があるため、開発ソース ファイルではこれを行わないことをお勧めします。
いくつかのオプションのタグを省略すると、ページ サイズが小さくなり、特に一部の大規模な Web サイトで便利です。この目標を達成するには、開発の後の段階でページを圧縮し、このステップではこれらのオプションのタグを完全に省略できます。
パフォーマンス上の理由から、スクリプトの非同期読み込みは重要です。 など、スクリプトが
内に配置されている場合、スクリプトが完全にロードされて実行されるまで、そのロードによって DOM 解析がブロックされます。これにより、ページの表示に遅延が発生します。特に一部の重量のあるスクリプトは、ユーザー エクスペリエンスに大きな影響を与えます。スクリプトを非同期的にロードすると、このパフォーマンスへの影響が軽減されます。 IE10 以降との互換性だけが必要な場合は、スクリプトに HTML5 async 属性を追加すると、
にスクリプト参照を記述しても、影響はありません。古いブラウザとの互換性が必要な場合は、スクリプトを動的に挿入するためにスクリプト ローダーを使用できることがこれまでの経験からわかっています。 yepnope または labjs を検討してください。スクリプトの挿入に関する問題の 1 つは、CSS オブジェクト ドキュメントの読み込みが開始される前 (CSS が読み込まれた直後) に準備が整うまで待機する必要があることです。これにより、時間内にトリガーする必要がある JS に一定の遅延が発生し、さらに多くの時間がかかります。ユーザーエクスペリエンスに影響を与えるかどうかです。
結論として、古いブラウザ (IE9 以降) との互換性がある場合は、次のベスト プラクティスに従う必要があります。
スクリプト参照は本文終了タグの前に書かれ、async 属性を持ちます。これにより、古いブラウザではスクリプトが非同期的に読み込まれませんが、本文の終了タグの前で DOM 解析がブロックされるだけなので、ブロックの影響が大幅に軽減されます。最新のブラウザでは、DOM パーサーが本文の最後に script タグを見つけた後にのみスクリプトが読み込まれます。現時点では、読み込みは非同期であり、CSSOM をブロックしません (ただし、CSSOM の実行は引き続き行われます)。
すべてのブラウザで推奨
<html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <!-- body goes here --> <script src="main.js" async></script> </body> </html>
最新のブラウザでのみ推奨
<html> <head> <link rel="stylesheet" href="main.css"> <script src="main.js" async></script> </head> <body> <!-- body goes here --> </body> </html>
使用することを意味する作成時の要素 (誤って「タグ」と呼ばれることもあります) の初期化に基づいています。たとえば、header 要素を使用してヘッダー タイトルを定義し、p 要素を使用してテキスト段落を定義し、a 要素を使用してリンク アンカーを定義します。
理由と目的を持って HTML 要素を使用することは、アクセシビリティ、コードの再利用、コードの効率にとって非常に重要です。
次の例は、セマンティック HTML の主なケースの一部をリストしたものです:
非推奨
<b>My page title</b> <div class="top-navigation"> <div class="nav-item"><a href="#home">Home</a></div> <div class="nav-item"><a href="#news">News</a></div> <div class="nav-item"><a href="#about">About</a></div> </div> <div class="news-page"> <div class="page-section news"> <div class="title">All news articles</div> <div class="news-article"> <h2>Bad article</h2> <div class="intro">Introduction sub-title</div> <div class="content">This is a very bad example for HTML semantics</div> <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div> <div class="article-foot-notes"> This article was created by David <div class="time">2014-01-01 00:00</div> </div> </div> <div class="section-footer"> Related sections: Events, Public holidays </div> </div> </div> <div class="page-footer"> Copyright 2014 </div>
推奨
<!-- The page header should go into a header element --> <header> <!-- As this title belongs to the page structure it's a heading and h1 should be used --> <h1>My page title</h1> </header> <!-- All navigation should go into a nav element --> <nav class="top-navigation"> <!-- A listing of elements should always go to UL (OL for ordered listings) --> <ul> <li class="nav-item"><a href="#home">Home</a></li> <li class="nav-item"><a href="#news">News</a></li> <li class="nav-item"><a href="#about">About</a></li> </ul> </nav> <!-- The main part of the page should go into a main element (also use role="main" for accessibility) --> <main class="news-page" role="main"> <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. --> <section class="page-section news"> <!-- A section header should go into a section element --> <header> <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) --> <h2 class="title">All news articles</h2> </header> <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other re-usable module / section that can occur multiple times on a page) a article element should be used --> <article class="news-article"> <!-- An article can contain a header that contains the summary / introduction information of the article --> <header> <!-- As a article title does not belong to the overall page structure there should not be any heading tag! --> <div class="article-title">Good article</div> <!-- Small can optionally be used to reduce importance --> <small class="intro">Introduction sub-title</small> </header> <!-- For the main content in a section or article there is no semantic element --> <div class="content"> <p>This is a good example for HTML semantics</p> </div> <!-- For content that is represented as side note or less important information in a given context use aside --> <aside class="article-side-notes"> <p>I think I'm more on the side and should not receive the main credits</p> </aside> <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element --> <footer class="article-foot-notes"> <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time while the actual text in the time element can also be more human readable / relative --> <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p> </footer> </article> <!-- In a section, footnotes or similar information can also go into a footer element --> <footer class="section-footer"> <p>Related sections: Events, Public holidays</p> </footer> </section> </main> <!-- Your page footer should go into a global footer element --> <footer class="page-footer"> Copyright 2014 </footer>
写真、ビデオ、キャンバス アニメーションなど、ページ上のメディアの場合。 、代替アクセス インターフェイスがあることを確認してください。画像ファイルには意味のある代替テキスト (alt) を使用でき、ビデオ ファイルやオーディオ ファイルにはキャプションや字幕を追加できます。
代替コンテンツを提供することはユーザビリティにとって重要です。視覚障害のあるユーザーが @alt なしで画像が何であるかをどのように知るかを想像してみてください。
(画像の alt 属性はコンテンツで埋める必要はありません。これは純粋に装飾的な画像に使用できます: alt="")。
非推奨
<img src="luke-skywalker.jpg">
推奨
<img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">
推奨されません
<img src="huge-spaceship-approaching-earth.jpg" alt="Header image">
推奨
<img src="huge-spaceship-approaching-earth.jpg" alt="A huge spaceship that is approaching the earth">
懸念事項の分離
严格地保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。
就是说，尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。
在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。
清晰的分层意味着：
不推荐
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="grid.css"> <link rel="stylesheet" href="type.css"> <link rel="stylesheet" href="modules/teaser.css"> </head> <body> <h1 style="font-size: 3rem"></h1> <b>I'm a subtitle and I'm bold!</b> <center>Dare you center me!</center> <script> alert('Just dont...'); </script> <div class="red">I'm important!</div> </body> </html> 推荐
<!DOCTYPE html> <html> <head> <!-- Concatinate your style sheets into a single one --> <link rel="stylesheet" href="main.css"> </head> <body> <!-- Don't use style attributes but assign sensible classes and apply styles in the stylesheet --> <h1 class="title"></h1> <!-- Don't use presentational elements and assign sensible classes --> <div class="sub-title">I'm a subtitle and I'm bold!</div> <!-- Maybe your comments get centered in your presentation but that decision is up to the stylesheet --> <span class="comment">Dare you center me!</span> <!-- You wanted to make it red because it's important so then also name the class important and decide in the stylesheet what you want to do with it --> <div class="important">I'm important!</div> <!-- Put all your scripts into files and concatinate them into a single one --> <script async src="main.js"></script> </body> </html>
不要让非内容信息污染了你的 HTML。现在貌似有一种倾向：通过 HTML 来解决设计问题，这是显然是不对的。HTML 就应该只关注内容。
HTML 标签的目的，就是为了不断地展示内容信息。
以下例子展示了误将 HTML 用来解决设计问题的这两种情况：
不推荐
<!-- We should not introduce an additional element just to solve a design problem --> <span class="text-box"> <span class="square"></span> See the square next to me? </span>
.text-box > .square { display: inline-block; width: 1rem; height: 1rem; background-color: red; } 推荐
<!-- That's clean markup! --> <span class="text-box"> See the square next to me? </span>
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */ .text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background-color: red; } 图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息。
不推荐
<!-- Content images should never be used for design elements! --> <span class="text-box"> <img src="square.svg" alt="Square" /> See the square next to me? </span>
推荐
<!-- That's clean markup! --> <span class="text-box"> See the square next to me? </span>
/* We use a :before pseudo element with a background image to solve the problem */ .text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background: url(square.svg) no-repeat; background-size: 100%; } 省略样式表与脚本上的 type 属性。鉴于 HTML5 中以上两者默认的 type 值就是 text/css 和 text/javascript，所以 type 属性一般是可以忽略掉的。甚至在老旧版本的浏览器中这么做也是安全可靠的。
不推荐
<link rel="stylesheet" href="main.css" type="text/css"> <script src="main.js" type="text/javascript"></script>
推荐
<link rel="stylesheet" href="main.css"> <script src="main.js"></script>
如果 HTML5 语义化标签使用得当，许多可用性问题已经引刃而解。ARIA 规则在一些语义化的元素上可为其添上默认的可用性角色属性，使用得当的话已使网站的可用性大部分成立。假如你使用 nav, aside, main,footer 等元素，ARIA 规则会在其上应用一些关联的默认值。 更多细节可参考 ARIA specification
另外一些角色属性则能够用来呈现更多可用性情景（i.e.role="tab"）。
检查文档中的 tab 切换顺序并传值给元素上的 tabindex，这可以依据元素的重要性来重新排列其 tab 切换顺序。你可以设置 tabindex="-1" 在任何元素上来禁用其 tab 切换。
当你在一个默认不可聚焦的元素上增加了功能，你应该总是为其加上tabindex 属性使其变为可聚焦状态，而且这也会激活其 CSS 的伪类:focus。选择合适的 tabindex 值，或是直接使用 tabindex="0" 将元素们组织成同一 tab 顺序水平，并强制干预其自然阅读顺序。
如果 SEO 和可用性环境条件允许的话，建议考虑采用微格式。微格式是通过在元素标签上申明一系列特定数据来达成特定语义的方法。
谷歌、微软和雅虎对如何使用这些额外的数据一定程度上的达成一致，如果正确的使用，这将给搜索引擎优化带来巨大的好处。
你可以访问 schema.org 获得更多内容细节。
看一个电影网站的简单例子：
不带微格式
<div> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div>
带有微格式
<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span> </div> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div>
通常一个比较好的做法是将页面内所有的头部标题元素都加上 ID. 这样做，页面 URL 的 hash 中带上对应的 ID 名称，即形成描点，方便跳转至对应元素所处位置。
打个比方，当你在浏览器中输入 URL http://your-site.com/about#best-practices，浏览器将定位至以下 H3 上。
<h3 id="best-practices">Best practices</h3>
在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。
（如果由于换行的空格引发了不可预计的问题，那将所有元素并入一行也是可以接受的，格式警告总好过错误警告）。
推荐
<blockquote> <p><em>Space</em>, the final frontier.</p> </blockquote> <ul> <li>Moe</li> <li>Larry</li> <li>Curly</li> </ul> <table> <thead> <tr> <th scope="col">Income</th> <th scope="col">Taxes</th> </tr> </thead> <tbody> <tr> <td>$ 5.00</td> <td>$ 4.50</td> </tr> </tbody> </table>
使用双引号(“”) 而不是单引号(“) 。
不推荐
<div class='news-article'></div>
推荐
<div class="news-article"></div>
[1]: 此处的空白元素指的是以下元素：area, base, br, col,command, embed, hr, img, input, keygen, link, meta, param,source, track, wbr
<p><strong>其他精彩文章</strong></p><h2>jQuery教程(19)-jquery ajax操作之序列化表单</h2><h2>jQuery教程(18)-ajax操作之执行POST请求</h2><h2>jQuery教程(20)-jquery ajax + php 操作之为Ajax请求提供不同...</h2><h2>jQuery教程(21)-jquery ajax 回调函数</h2> <p class="sycode"> </p><h2>jQuery教程(22)-ajax操作之错误处理</h2> <p class="sycode"> </p><h2>jQuery教程(24)-ajax操作之Ajax和事件</h2> <p></p><p>更多关于android开发文章</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
