Htmlのヒント あなたのコードを意味的にする

Htmlの意味づけ、それは決まりきった問題であるように思えます。ググってみると、意味づけに関する記事がたくさんあります。なぜタグの意味づけなのか？私はそう思う：Htmlの各タグは、その特定の意味を持っており、意味づけ、つまり、私たちはより良い人と機械（機械はブラウザとして理解することができます検索エンジンとして理解することができます）が一目で明確になるように、適切な場所に適切なタグを使用することができましょう。私の説明でわかりにくかったら、ググってください。

正しいタグを正しい場所に使うには？ 

これは単純なロジックで理解できます。例えば、h1〜h6タグはヘッダー、ulは順序なしリスト、olは塗りつぶしリスト、dlは定義済みリスト、emやstrongタグは強調...といった具合です。はっきり言って、それぞれのHtmlタグの英語解釈が意味づけを決めている（この記事の後半で、参考までに一般的なHtmlタグの英語解釈の表を載せる）。 参考までに）。

人間にも機械にもわかりやすいとは？ 

Htmlページがセマンティックであるかどうかを確認する最も良い方法は Css のリンクをクリックすると、ページの構造がうまく整理されているか、ページが非常に読みやすいかどうかを確認することができます。なぜ、そんなことを言うのですか？私たちは、ブラウザにはデフォルトのスタイルがあることを知っています（Chromeの Chrome用ウェブデベロッパーツール プラグイン、またはFirefoxの ウェブデベロッパー プラグイン）、例えばh1~h6には太字・細字、上下のマージン、ul, ol, dlにはデフォルトの箇条書き、strongにはデフォルトで太字のスタイルがあります...。つまり、良いセマンティックHTMLを持つ同じページは、CSSがページから削除されたとしても、良いパフォーマンスを発揮することができるのです。

もうひとつ、セマンティックなコーディングは検索エンジンの利便性にもつながります。検索スパイダーは、CSSは認識しませんが、HTMLタグは認識します。

簡単な例を挙げましょう。

上の簡単な例と、Cssの定義がない場合の結果で、両者の違いがわかると思います。Html5を学んでいる方なら、そのheader, footer, sidebar, articleなどの要素は、すべて新しいセマンティックタグです。
Htmlコーディングのセマンティクスは、質の高いフロントエンド開発への一歩となります。つまり、Web 標準への準拠が向上し、スタイルを削除した後でもページを整理しておくことができるようになるのです。セマンティックの詳細については、Googleで検索するか、アダムの <フォント ウェブフロントエンド開発への道 第3章
付録 英語と中国語におけるタグのセマンティクス

<テーブル タグ名 英語フルスペル 中国語翻訳 a アンカー アンカー abbr 略語 略語 頭字語 頭字語 頭文字をとる 住所 アドレス 住所 b 太字 太字 大きい ビッグ 大きくなる ブロッククオート ブロック引用 のブロック引用 ブラン ブレーク 改行 キャプション キャプション タイトル センター [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] スパン スパン 範囲 強い 強い 重み付け サブ 添え字付き 次の表 スーパー 上付き文字 上付き文字 u 下線 下線 ウル 順序不同のリスト 順序不同のリスト ヴァル 変数 変数

以下を追加します。

1. htmlセマンティクスとは

正しいhtmlタグを選択することで、開発者は読みやすく、よりエレガントなコードを書くことができ、同時にブラウザーのクローラーや機械はそれをうまく解析することができるようになるのです。

2. なぜセマンティック化するのか？

良いコンテンツ構造、コード構造を持つページをCSSなしでレンダリングすること：裸で走り回ったときに見栄えがすること。
ユーザーエクスペリエンス：例：タイトル、用語の説明や画像情報の説明のためのalt、ラベルタグのライブ使用。
SEOフレンドリー：検索エンジンと良好なコミュニケーションを確立することで、クローラーがより有効な情報をクロールできるようになります。クローラーはラベルを頼りに、文脈や個々のキーワードの重みを判断しています。
他のデバイス（スクリーンリーダー、ブラインドリーダー、モバイルデバイスなど）による解析を容易にし、ウェブページを意味のある形でレンダリングすることができます。
チームが開発・維持しやすい、意味づけはより読みやすく、ウェブページを棒読みする次の大きな動きである、W3C標準に従うチームはこの標準に従う、差別化を減らすことができる。

3. HTMLコードを書くときに見るべきことは？

 　1. 意味のないタグdivとspanはできるだけ使わない。
    2. 意味論が明白でなく、両方が利用可能な場合は、div または p を使用します。p はデフォルトで上下の間隔があり、特定のエンドポイントとの互換性のために有益です。
    3. 純粋なスタイルタグや仕様でサポートされていないタグ、例えば: b, font, u, center,strike, menu などは使用せず、css 設定で代用するようにしてください。
    4. 強調したいテキストはstrongタグかemタグに入れる（ブラウザのプリセットスタイル、CSSで指定できる場合は使わない）、strongはデフォルトで太字（bは使わない）、emはイタリック（iは使わない）です。
    5.テーブルを使用する場合、タイトルはcaption、テーブルヘッダーはthead、ボディ部分はtbody、テールはtfootで囲む。テーブルヘッダーと一般セルは区別し、テーブルヘッダーはth、セルはtdとする。
    6. フォームフィールドは afieldset タグでラップし、フォームの用途は alegend タグで記述する。
    7. 7. 各 input タグに対応する説明文は、label タグを使用する必要があり、説明文は、input に id 属性、label タグに for=someld を設定して、対応する input と関連付ける必要があります。
    8. 一部のタグの属性を省略しない、<img>タグのalt属性は画像がうまく表示されないときの代替テキストとして、<a>タグのtitle属性は説明情報として利用でき、マウスを乗せたときにヒントとして表示されることがあります。

ヤフーの面接の質問です。

<ブロッククオート

<P> 兄が書いているのはHTMLではなく、孤独なんです。

問題の中で

1.htmlとxhtmlの規格の違い、xhtmlは構造が厳密で、タグは必ず閉じなければならない、シングルタグは最後に/を付けて閉じる必要がある、タグは全て小文字でなければならない。
2.構造とスタイルの分離は、スタイルを制御するために<br/>を使用しないでください;合理的な設計構造は、行送りの段落は、各段落のpを追加する必要があり、スタイルは、達成するためにCSSを使用する必要があります。
 3.タグの合理的な使用、タグのセマンティクスを重視、略語は <abbr> "I" は <cite> 引用文は <q> でマークすることができる。

<ブロッククオート

//コードの参照は以下の通りです。
<p> Brother wrote not <abbr title="Hypertext Markup Language">HTML</abbr>, it's lonely. </p>
<p><cite>I</cite>say:<q>Don't be obsessed with brother, brother is just a legend</q></p>

上記はHtml Tips Semanticize your codeの詳細であり、Html Semanticizeに関するより多くの情報はScript Houseの他の関連記事に注意を払ってください!