今日のウェブはますますセマンティックです。 しかし、セマンティックはどういう意味ですか？ なぜこれが重要なのですか？
セマンティックHTMLは、ドキュメントの意味を表します。 彼は、テキストがどのように見えるかということよりも、テキストが何であるかについてのほうが好きです。 優れたセマンティックマークアップは、個人とコンピューターの両方がドキュメントの内容とそのコンテキストをよりよく理解するのに役立ちます。
セマンティックマークアップの解釈ははるかに簡単です。 彼女は検索エンジンに優しい。 最新のブラウザでうまく動作し、コンテンツを表現するために必要なコードの量を減らし、このコードの読みやすさを改善します。
わかりました、セマンティックマークアップは良いですが、それを使用する方法。 通常のタグをより表現力豊かなタグに置き換えることから始めましょう。 このゲームに参加できる8つの要素を見てみましょう。
<q>
ブロックのいとこ<blockquote>と同様に、 <q>タグは引用を示すために使用されます。
引用符を使用しないのはなぜですか？ 引用符は必ずしも引用を意味するわけではありません。 時々、それらは何かの名前をハイライト、皮肉、または示すために使用されます。この文脈では、それらは正しく使用されます。 ただし、何かを引用すると、 <q>は意図を明確に表します。
<i>および<b>
古き良き時代には、 <i >タグと<b>タグはそれぞれ斜体と太字のテキストを示していました。 セマンティクスを表現から分離するというアイデアが勢いを増し始めたとき、彼らはこのタグを疑いを持って扱い始めました。 これらはそれぞれ<em >タグと<strong>タグに置き換えられ、それぞれ強調と強調が示されます。
HTML5では、最終的に、これらのタグは優れたセマンティック解釈を取得しました。 <i>タグは、異なるトーンまたはムードを持つテキストをマークします。 これは、たとえば、考えや技術用語を説明するのに役立ちます。 <b>タグは、通常のテキストとはスタイル的に異なるテキストをマークしますが、セマンティックな意味は強調されていません。 これは<span>の使用とどのように違いますか？ 重要なのは、 <b>が意味的に明確な意味を持たないことです。
<abbr>
<abbr>は略語に使用されます！ 特に多くのドキュメントがある場合に役立ちます。 このタグにはオプションのタイトル属性があり、テキストのフルバージョンを指定できます。
<abbr title="laugh out loud">lol</abbr> <abbr title="I don't know">idk</abbr> <abbr title="got to go">g2g</abbr> <abbr title="talk to you later">ttyl</abbr>
<時間>
日付のローカライズの古典的な問題を見てみましょう。 2013年10月5日の米国では10/05/13、英国では2013年5月10日、南アフリカでは2013/10/05、ロシアでは05.10.13と記録されています。 これらのオプションはすべて、自動日付認識のタスクを非常に困難にします。
<time>タグを使用すると、機械で読み取り可能な形式で日付と時刻を指定できます。 前の例は次のようになります： <time datetime = "2013-10-05"> 10/05/13 </ time> 。 HTMLパーサーは、指定した形式に関係なく、日付を正確に理解できます。 <time>タグでは、オプションで24番目の形式で時刻を指定することもできます。 <time datetime = "2013-10-05 22:00"> 10/05/13 at 10 PM </ time>;
<マーク>
あなたはそれをやったことがありますか？
<p> Three hundred pages of boring, useless text. <span class="highlight">The one thing you need to know and will never be able to find again if you don't highlight it.</span> More boring stuff… </p>
もうありません。 HTML5は<mark>要素を導入しました。この要素は、重要性が高いため、参照目的で選択されたテキストをマークします。
<入力>
はい、 <input> 。 おそらく<input type = "text"> 、 <input type = "submit"> 、おそらく<input type = "hidden">を使用し、他のタイプを使用したことがありますか？ HTML5では、 <input>は新しいタイプの全体で使用できます。
- メール
- tel
- 数
- 範囲
- 日付
- 時間
- 検索する
- 色
これは素晴らしいことですが、まず、ターゲットブラウザがこれらすべてをサポートしていることを確認する必要があります。 これはまだ問題です。
<メニュー>
順不同リストからメニューを作成したことがありますか？
<ul class="menu-toolbar"> <li class="new">New</li> <li class="open">Open</li> <li class="save">Save</li> <li class="quit">Quit</li> </ul>
もうこれをしないでください！ このための<menu>があります。これは、コマンドの順序なしリストです。 このタグにはtype属性があり、 popupまたはtoolbarの値を取ることができます。
<menu type="toolbar"> <li class="new">New</li> <li class="open">Open</li> <li class="save">Save</li> <li class="quit">Quit</li> </menu>
ボーナス
ほとんどのフロントエンド開発者は＆nbsp;を使用します。 HTMLを記述するとき、多くはその本当の意味を知りません。 改行しないスペースは行を分割しません。 これは、2つの単語が不可解なスペースで接続されている場合、それらは常に同じ行にあることを意味します。 これは時々非常に重要です。 以下に例を示します。
- ユニットタイプ：12 m / s
- 時間：午後8時
- 固有名詞：デイリークイーン
同様の目的で、 不可解なハイフン（ ＆＃8209; ）もあります。
結論として
HTMLは日々意味を増しています。 これらの要素をすべて使用することは、よりアクセスしやすく理解しやすいマークアップを作成するための良い出発点です。 より完全な図については、要素の周期表 、 Mozilla Developer Networkのドキュメント、または完全に自信がある場合はW3CのHTML仕様をご覧ください。 お楽しみください！
翻訳者から：これはハブでの私の最初の投稿です。まだあまり入力していません。したがって、カルマを減らす場合は、少なくともコメントしてください。
元の記事-davidwalsh.name/8-html-elements