次の2つのコード部分は、セマンティックHTMLビューの観点からも問題がありますか？
<！ - 以上 - >
<!-- 示例1 -->
<label>作者: <input type="author" texture="deep pile"></label>
<!-- 示例2 -->
<body>
<h1>【深度】扒开V8引擎的源码，我找到了你们想要的前端算法</h1>
<h2>下次面试官再问算法，用它怼回去！</h2>
...読者はまず、上記の例のコードのセマンティック、テキストの最後に答えを見て試すことができます。
HTMLセマンティックが（に従い、W3Cの仕様のラベル要素とその財産の適切な使用、以下「セマンティック」と呼ばれ、HTML HTML5を参照）多くの記事を述べたが、内容のほとんどは、セマンティックの必要性を公表した後、開発のリーダーを説得することですマルチセマンティックタグを使用して。
この記事では、現状維持の唯一のセマンティクスを探索するために、ほとんどの読者は、意味のコードを書くことはお勧めできません難しく必要性を、公表、および実用的な意味的な操作を提供していません。
ステータスセマンティック
私たちは、セマンティックWebの現在のレベルを見て一例として、非セマンティックタグの乱用します。
実際に2つだけのdivおよびスパンでの非セマンティックタグは、唯一のサプリメントのデフォルトラベルとしてこれら2つのラベルを持っているでしょうが、現実には、それらの使用頻度がはるかに他の意味タグよりもです。
ここでは、ページ上の個々のラベルの数と割合の統計を使用することができますタグのjsスクリプトの統計数が、あります。
ブラウザのコンソールを開き、結果を得るために、次のコードを実行します。
var total = 0
var obj = Array.prototype.reduce.call(document.querySelectorAll('*'), (acc, cur) => {
let tag = cur.tagName.toLowerCase()
acc[tag]= acc[tag] || 0
acc[tag]++
total++
return acc
}, {})
var list = []
for(let k in obj) list.push({tag: k, times: obj[k], ratio: (obj[k] * 100 / total).toFixed(2) + '%'})
console.clear()
console.table(list.sort((a, b) => b.times - a.times))私たちは、最も頻繁に使用される検索エンジンのページを見て、の意味度合い取る67.5パーセントを。
{％Asset_img baidu.jpg％}
ベストは、セマンティックページの記事の投稿などよりもページが、ブログサイトのページの範囲セマンティック達成61.29パーセントを。
{％Asset_img jianshu.jpg％}
電気の供給業者のウェブサイトのページや、その後の世界ランキング、セマンティック度の時価総額の最前線を見て43.19パーセント。
{％Asset_img taobao.jpg％}
その他の統計データは、全体的な状況は意味の非常に低い程度で、掲載されていません。
なぜ、セマンティックそう見られるようにしませんか？
セマンティック障害
シーンはありませんセマンティック道路上のエンジニアに向けたステップによって、実際の現像工程である方法を見てみましょう。
セマンティックコスト
我々はそれらをすべて覚えておきたい場合はHTML定義し、100枚の以上のラベル、いくつかの困難を持っています。
各プロパティの異なるラベル、およびメモリのない少量の結合された場合でも、分類メモリは、ダースのカテゴリがあります。
だから、あなたはまた、文書を確認する必要があり、時間を使用しています。
効率の開発に機能を達成するために直接使用するdiv要素とスパンとして良いようではありません。
セマンティック利益
技術の使用は、最初にその収益を考慮し、またはそれはどんな問題を解決することができ、その後、何の意味論は、それをもたらすことができますか？
- コードの可読性を向上させます。
- SEOを助長します。
- 視覚障害者のためのケア。
- ...
：実際には、ただ一つのことにまとめること、と述べた視認性を高めるために。
自明の重要性の認識、映画のようには認識村の「風のささやきの呪い」王Fugui、バック叫び裕福な人と呼ばれる人々の多くはありません。
ことで、意味が不可欠ですか？
確かに〜
セマンティックHTMLが識別達成するための唯一の手段ではない、タグID、プロパティ、スタイル名をすることができます。
CSSスタイルクラスを書く、問題の認識を置くための方法は、（誰セマンティックできないのですか？、あなたがいないカスタムスタイル、またはスタイルが唯一のクラスセレクタを使用することができることができれば、想像）解決し、そしてスタイルクラスまたは属性によって繰り返されましたIDが特定されます。
そして、これは以前に比べていくつかの方法で、収益の明白な意味的な使用はありません。
非セマンティック損失
開発者の観点から検討するために、あなたはそれを害するものを意味ラベルを使用していない場合は？
残念ながら、ほとんどない〜
- コードの可読性には、セマンティックHTMLは解決することができない、しかもidとCSSスタイルクラスは、ほぼ解消されます。
- SEOには、他の手段があります：マルチリンク、メタタグを記述すること。もちろん、お金は確かに最も間接的です。
- これまで視覚障害者として、この需要の優先順位はあまり説明する必要はないため、これら中小企業が考慮されませんです。
開発者の下部にあるので、セマンティックルールにそれを促進することが可能であるかどうかマネージャー、その後、セマンティック電源が投入されていませんか？
I 「コード規格の3つの共通のタイプは、」あなたは地上のルールを実行する場合、人々は自己規律に依存して、先に述べたように、彼の法律効率が低すぎる実現するために、人間によって、達成することが困難である自動化されたチェックの確立ので、メカニズムは、サプリメントとして人間の規律は、効果的なソリューションです。
何度も私たちは、このようなeslint、tslint、HTML少数があるツールをチェックするようコードチェックツールを使用しますが、これらのツールは、唯一の構文チェックし、意味ないのチェックを確認することができます。
たとえば、あなたがチェックアウトすることができ命名こぶとparent_node、この変数名が仕様を満たしていないが、コールは、変数のためであるaか、呼び出しuser検査ツールを無力です。
どこにこの道もリードセマンティックので必須。
セマンティックは本当にあきらめることができますか？
ほとんどのエンジニアのために、私はとても怖いです。
コードの書き込みセマンティクスが直接効率を高めるために開発をもたらすものではありません、我々は、リーダーシップの感謝と昇進と昇給に値しなかったでしょう......
しかし、エンジニアのための、技術ではなく追求します！
彼らは正しいことをやってすることは簡単な作業をしているよりも重要であることを知っています！
セマンティック道路
あなたは、道路のセマンティクスに乗り出すことを決めた場合は、私は次の3つの手順を信じるあなたを助けることができます。
1.適切にラベルされたプロパティ
エンジニアのために、我々は習慣がハード死ぬプログラムする前に、すべての1人の息を取り除く必要があり、非セマンティックプログラミング習慣の開発にいくつかの経験が長い形式である必要があります。
息を推奨しないすべてのすべてのダウンにラベルを付け、その後、前のページの下に、全体的なセマンティック技術を書き換えます。
時間がかかり、労働集約、フラストレーションを生成し、あきらめることは簡単です。
したがって、推奨される方法は、プロパティが始まるから徐々にセマンティック、でもラベルを達成することです。具体的な例として実施例1を参照されたいです
この段階は重要であるセマンティック習慣を開発することです。
それを半分の戦いを持っている習慣を固執することができ、多くのケースでは。
文書の構造を理解する2。
習慣の後には、構造からのページの意味を考えることができます。
非セマンティック主な問題は、div要素とスパンタグの乱用です。
DIVおよびスパンを使用しないでくださいすべての後に、これら2枚のラベルにも利用価値を持って発明された、現実的ではありません。
まず、我々が大幅にセマンティックページの度合いを高めることができるように可能性が悪用されるためにいくつかの領域を特定することが可能です。
最初の考慮は不要なのdivとスパンタグを軽減し、唯一、代わりに適切なセマンティックタグの使用を検討することです。
例えば、複数のテキストに関連し、毎日コンテンツ開発、H1〜H6、P、Q、B ... DIVおよびスパンを置き換えるために、これらのラベルを使用することを検討してください。
主部、脇フッタ、DIV代わりヘッダ：さえレイアウトはまたなど、いくつかの構造的なタグを使用することができます。具体的には、実施例2参照します
3.分類メモリ
あなたは完全にセマンティックになりたい場合は、ツールを使用することができます。
以下、参考のために、AフローチャートHTML5です。
{％asset_img flowchart.png％}
W3Cはまた、次のようにアニメーションがある、それはイメージで、分類を与えます：
{％asset_img categories.gif％}
具体的な効果は、この見ることができますサイトを
上記の二つの絵を参照してください、私は一緒に複数の動作バージョンを置きます。
まず、我々は、特に単一ページのアプリケーションの開発では、我々はコンポーネントを開発する際の主要なラベルを使用することができる考慮し、考慮にいくつかの基本的なタグを必要としません。
!DOCTYPE,html,head,meta,base,link,style,body,script,noscript,<!-- -->
そして、ラベル分類の数十の残りの部分は、完全に適切な、しかし、覚えやすいし、使用できない場合があります。
{％asset_img flow.jpg％}
もちろん、どんなにどの方法、前提は、まだこれらのラベルの意味と性質を覚えています。
このツールの役割を果たして使用するラベルを決定する迅速かつ正確に私たちを助けるために、我々はページを作成するときにのみです。
概要
フロントエンド成長軌道上の石のようなセマンティック、すべての小石が影響されることはありませんが、唯一のより多くの石が長いために道を開い収集するために失っているようです -
熟練したセマンティックページを用意していないために、直接あなたがシニアフロントエンドエンジニアになるため、しかし、フロントエンドエンジニアの仕事の習慣や技術リテラシーの意味論を反映することができました。
<!-- 示例1语义化 -->
<!-- type值修改为浏览器可识别的值 -->
<!-- 自定义属性使用data前缀 -->
<label>作者: <input type="text" class="author" data-texture="deep pile"></label>
<!-- 示例2语义化 -->
<!-- 当出现主标题和子标题时，应使用hgroup标签作为父元素 -->
<body>
<hgroup>
<h1>【深度】扒开V8引擎的源码，我找到了你们想要的前端算法</h1>
<h2>下次面试官再问算法，用它怼回去！</h2>
</hgroup>
...同時に、読者が回答の質問を伴う思考を左に与えます：
<!-- 可点击的图标 -->
<div class="lazy avatar avatar loaded immediate"></div>
<!-- 点击后弹出的菜单 -->
<ul class="nav-menu user-dropdown-list">
<div class="nav-menu-item-group">
<li class="nav-menu-item">
<a href="/user/592447fb44d904006ce996f8" class="link-icon">
<i class="fengwei fw-person"></i>
<span>我的主页</span>
</a>
</li>
<li class="nav-menu-item">
<a href="/user/592447fb44d904006ce996f8/likes">
<img src="https://b-gold-cdn.xitu.io/v3/static/img/zan.e9d7698.svg" class="zan">
<span>我赞过的</span>
</a>
</li>
<li class="nav-menu-item">
<a href="/user/592447fb44d904006ce996f8/collections">
<img src="https://b-gold-cdn.xitu.io/v3/static/img/collect.02e2979.svg" class="collect">
<span>我的收藏集</span>
</a>
</li>
</div>
<div class="nav-menu-item-group">
<li class="nav-menu-item">
<a>
<i class="fengwei fw-logout"></i>
<span>登出</span>
</a>
</li>
</div>
</ul>参考：