HTMLマークアップ要素の一覧【ウェブデザイン技能検定 1級学科範囲】

HTMLで「マークアップ」として使用される要素は、文書の構造や意味を示すためのタグを指します。
以下の要素も文書の意味を明確にするために使用されるため、広義の「マークアップ」に含まれます。
これらの要素は見た目・装飾的な効果をもたらすわけではなく、文書の特定の部分を意味論的に定義するためのものです。

HTMLマークアップ要素の詳細

普段なかなか使用されないような珍しいマークアップ要素をいくつかピックアップしてみました。

定義要素(<dfn>)

説明: 専門用語や定義される用語を示すために使用されます。

:HTMLという用語をマークアップするために使用。

<p><dfn>HTML</dfn> はハイパーテキストマークアップ言語の略です。</p>

ちなみに専門用語などではなく学名などは<i>要素で表現するのが最適のようです。

人間の学名は<i>Homo sapiens</i> 

略語要素(<abbr>)

説明: 略語や頭字語を示すために使用されます。ツールチップでフルフォームを提供することができます。

:HTMLはHypertext Markup Languageの略語ですと示すためのマークアップ、英語のサイトには多様できそうです。

<p><abbr title="Hypertext Markup Language">HTML</abbr> はウェブページを作成するための言語です。</p>

変数要素(<var>)

説明: プログラムコードや数式内の変数を示すために使用されます。

:πr²を表すために使用、個人的にはよく工事関係のサイトなどで使用されているのを見かけます。

<p>円の面積は <var>πr²</var> で表されます。</p>

コード要素(<code>)

説明: プログラムコードのフラグメントを示すために使用されます。

:まさにコードのためのマークアップといった感じです。技術系のブログなどではよくみかけます。

<p>次のコードは "Hello, World!" を表示します: <code>console.log('Hello, World!');</code></p>

マークアップの意味

「マークアップ」とは、文書の構造や意味を示すために使用されるタグの集合を指します。これにより、コンテンツの意味を明確にし、ユーザーや機械(例えば、検索エンジンやスクリーンリーダー)によって適切に解釈されるようになります。

以下よく使われるマークアップも一覧にだしてみました。

マークアップの具体例

  • 見出し要素<h1> - <h6>
  • 段落要素<p>
  • リスト要素<ul>, <ol>, <li>
  • 強調要素<em>, <strong>
  • 引用要素<blockquote>, <q>
  • 定義要素<dfn>
  • 略語要素<abbr>
  • 変数要素<var>
  • コード要素<code>

まとめ

  • マークアップ要素: HTMLでは、文書の意味を明確にするために多くの要素が使用されます。これには、<dfn><abbr>, <var>, <code> などが含まれます。
  • 広義のマークアップ: abbrvarcode などの要素も、文書の構造や意味を示すために使用されるため、広義の「マークアップ」に含まれます。

タグのそれぞれの役割などに関しては違う記事でもまとめていますので、是非そちらもご覧ください。

これらの要素を適切に使用することで、HTML文書の意味を明確にし、アクセシビリティとSEOを向上させることができます。もし他に特定の要素について詳細な解説が必要であれば、ぜひ教えてください。

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事

 

スポンサードリンク