HTMLタグの種類と設定手順
HTMLには見出しタグ(例:<h1>)や段落タグ(例:<p>)など、要素ごとにさまざまな種類があります。タグを適切に設定することで、検索エンジンやアクセシビリティの観点からも情報取得が容易になります。
この記事では、Studioで設定できるタグの種類とタグ変更手順について解説します。
Tips:
設定できるタグは、ボックスの種類によって異なります。タグ内容を自由に記述することはできません。
HTMLタグの詳細は、HTML の基本 - ウェブ開発を学ぶ | MDNをご参照ください。
StudioでのHTML要素・属性の対応状況は、Studio HTML要素・属性対応表をご覧ください。
アクセシビリティの観点については、Studioアクセシビリティチェックシートも合わせてご確認いただけます。
主なタグの種類
テキストボックスに関連するタグ
初期状態のテキストボックスには<p>タグが設定されています。以下のタグに変更できます。
<p>:段落を表します。
<h1>〜<h6>:見出しを表します。数字が若いほど大きな見出しです。
<li>:リスト内の項目です。
<span>:特別な意味は持たず、文の一部をグループ化します。
ボックス・画像に関連するタグ
初期状態のボックス・画像ボックスには<div>タグが設定されています。以下のタグに変更できます。
<div>:特定の意味を持たず、グループ化の用途で利用します。
<nav>:ナビゲーション領域を表します。
<header>:ロゴやナビゲーショングループに使います。
<footer>:著作権や規約などの情報領域です。
<section>:見出しとコンテンツで区切られたセクションです。
<article>:独立したコンテンツまとまりです。
<main>:ページの中心となる情報領域で、各ページ1回のみです。
<ul>:項目リストのグループです。
<li>:リスト内の個々の項目です。
<label>:フォーム項目のまとまりに利用します。
<h1>〜<h6>:一定の条件を満たす場合のみ、見出しタグ<h1>〜<h6>もボックスに設定可能です。詳細はHTML の見出しタグ <h1> - <h6>をご確認ください。
タグの設定方法
Studioでは、初期状態の通常ボックスには<div>、初期状態のテキストボックスには<p>が設定されています。
タグを設定したいボックスを選択します。
右パネル下部の[タグ]から、タグの設定をします。
※タグの選択肢に見出しタグ<h1>が表示されない場合は、こちらの記事の「注意」をご覧ください。HTML の見出しタグ <h1> - <h6>

