HTMLやCSSでスタイリングを行う際、タグを使って文字を太字にするのは一般的な方法ですが、意味を持たないタグを使うことには注意が必要です。特に、id属性を持つタグを使う場合、その利用が適切かどうかは考慮すべきポイントです。この記事では、タグの使い方と、その代替案について解説します。
タグの問題点
タグは、文字を強調するために使われるHTML要素ですが、現在ではあまり意味論的に適切な使い方ではないとされています。というのも、タグは視覚的な強調を目的としたタグであり、内容に対する意味を付加するものではないからです。
例えば、SEOやアクセシビリティを重視する現代のWeb開発では、コンテンツの意味や構造が重要視されています。そのため、単に視覚的な効果を与えるだけのタグは、意味を持たない使い方となりやすいのです。
意味を持たないIDの使用
質問者が記述したコードでは、タグにid属性を使用して「con」や「con-2」などを付けている点が見受けられます。このように、意味を持たないIDをタグに追加することは、実際には推奨されません。ID属性は、一般的にページ内で一意の識別子として使用されるべきです。複数の要素に同じIDを付けることはHTMLの規格違反となります。
代わりに、意味を持たないIDを使用するのではなく、共通のクラス名を使用する方が、コードの可読性や保守性が向上します。
代替案：意味のあるタグやクラスの使用
代替案として、タグを使用する代わりに、タグを使うことが推奨されます。タグは、コンテンツに対する意味を加えるために使われるタグであり、SEOにも有利に働きます。また、タグのように視覚的な強調を行うためには、CSSでスタイルを適用することができます。
例えば、以下のようにCSSでスタイルを指定して、タグを使って強調を加えることができます。
strong {font-weight: bold;}ID属性の使用に関して
ID属性は、ページ内で一意に識別されるべきです。例えば、特定のセクションや記事の見出しにIDを使用して、リンクやJavaScriptでその要素をターゲットにする場合に使用されます。IDはスタイリングを目的としたものではなく、意味的に重要な要素を識別するために使用します。
したがって、複数の要素に同じIDを付けることは避け、クラス名を使って共通のスタイルを適用する方が適切です。
まとめ
HTMLのコーディングでは、意味を持たないタグやIDを使用することは避けるべきです。特に、視覚的な効果を目的とするタグやIDの重複を避け、意味を持つタグやクラスを使って、より意味論的で保守性の高いコードを書くことが重要です。これにより、SEOやアクセシビリティにも配慮したWebページが作成できるようになります。
コメント