Web制作

【HTML】要素&属性の読み方と用途 – ABC順

posted : 2019.11.13 updated : 2021.12.30

HTMLの要素&属性の読み方と用途ををABC順にまとめました。

使用例も一緒に記載していたら結構長くなってしまったので、CSS版はこちらにまとめました。

HTML – 要素の読み方と用途

<!- -　- ->　(コメントアウト)
HTMLソースの中にコメントを入れる。
【使用例】<!- -ここに入力した文字は表示されません- -><p>テキスト</p>

a (アンカー)
anchorの略。リンクを示す。
【使用例】<a href=”〜”></a>

abbr (アバー、エービービーアール)
Abbreviationの略。囲まれた語句が略語や頭字語であることを示す。
【使用例】<abbr title=”Hypertext Markup Language”>HTML</abbr>

address (アドレス)
連絡先の情報を示す。※メールアドレスや問い合わせページへのリンクとセットで使用します。
【使用例】<address>お電話でのお問い合わせは<a href=”tel:0120-000-000″>こちら</a>からお願い致します。</address>

article (アーティクル)
記事コンテンツを示す。
【使用例】<h1>ブログ</h1><article><h2>ブログはじめました</h2><p>記事のテキスト</p></article>

aside (アサイド)
補足・余談の情報を示す。
【使用例】<h1>ブログ</h1><article><h2>ブログはじめました</h2><p>記事のテキスト</p><aside><h2>補足情報のタイトル</h2><p>補足のテキスト</p></aside></article>

audio (オーディオ)
音声コンテンツを埋め込む。
【使用例】<audio src=”〜.mp3″><a href=”〜.mp3″ type=”audio/mp3″>音声ファイルのダウンロードはこちら</a></audio>

b (ビー)
他のテキストと区別したいテキストを示す。
【使用例】<p>リクはサイバーブリッジの<b>web担当</b>です。</p>

blockquote (ブロッククォート)
引用文であることを示す。
【使用例】<blockquote cite=”http://example.com”>この部分に引用文が入ります</blockquote>

br (ブレイク)
Breakの略。改行を示す。
【使用例】<p>お世話になります。<br>サイバーブリッジweb担当のリクです。</p>

button (ボタン)
ボタンを作成する。
【使用例】<button type=”submit”>送信する</button>

canvas (キャンバス)
グラフィックやアニメーションの描写領域を示す。
【※】JavaScriptと組み合わせて使用します。

caption (キャプション)
テーブルのタイトルを示す。
【使用例】<tabel><caption>タイトル</caption><tr><td>テキスト左</td><td>テキスト右</td></tr></table>

cite (サイト)
文献や作品のタイトルを示す。
【使用例】<p>リクは東野圭吾さんの<cite>夢幻花</cite>が好きです。</p>

col (コル)
columnの略。テーブルの列グループを示す。
【使用例】<tabel><caption>タイトル</caption><colgroup><col width=”100″><col width=”150″></colgroup><tr><td>テキスト左</td><td>テキスト右</td></tr></table>

dd (ディーディー)
Definition Descriptionの略。定義した用語の説明を示す。
【使用例】<dl><dt>リク</dt><dd>1992年4月28日千葉県市原市生まれ。</dd></dl>

div (ディブ)
特別に機能がない汎用的な範囲を示す。
【使用例】<div class=”blockbox”>divはブロック要素</div>

dl (ディーエル)
Definition Listの略。定義や説明のリストを表示する。
【使用例】<dl><dt>リク</dt><dd>サイバーブリッジ株式会社でweb制作を担当している。</dd></dl>

doctype (ドックタイプ)
ドキュメントタイプを宣言する。
【使用例】<!DOCTYPE html>

dt (ディーティー)
Definition termの略。定義する用語を表示する。
【使用例】<dl><dt>リク</dt><dd>2人の子供を持つシングルマザー</dd></dl>

em (エム、エンファシス)
emphasisの略。テキストに強勢をつける。強調文字・斜体文字になる。
【使用例】<p>webサイトは<em>HTML</em>と<em>CSS</em>で作成します。</p>

fieldset (フィールドセット)
フォームの入力項目をグループ化する。
【使用例】<form method=”post” action=””><fieldset><legend>個人情報</legend>お名前：<input type=”text” name=”name”>メール：<input type=”text” name=”mail”></fieldset><input type=”submit” value=”送信”></form>

figure (フィギュア)
図表などのまとまりを示す。
【使用例】<p>リクの好きな東野圭吾さんの本はこちらです。</p><figure><img src=”mugenbana.jpg” alt=”夢幻花”><figcaption>夢幻花</figcaption></figure>

figcaption (フィギュアキャプション)
figure要素のキャプション(表題)を示す。
【使用例】<p>リクの好きな東野圭吾さんの本はこちらです。</p><figure><img src=”mugenbana.jpg” alt=”夢幻花”><figcaption>夢幻花</figcaption></figure>

footer (フッター)
直近のセクションのフッター(情報)を示す。
【使用例】<footer><nav><a href=”index.html”>ホーム</a></nav><small>コピーライト </small></footer>

h1 (エイチワン)
Headingの略。見出しを示す。
【使用例】<h1>ブログのタイトル</h1><p>記事のテキスト</p>

hidden (ヒドゥン)
画面には表示されないデータを作成する。
【使用例】<input type=”hidden” name=”userid” value=”12345″>

html (エイチティーエムエル)
HyperText Markup Languageの略。ルート要素を示す。
【使用例】<html><head><title>ブログのタイトル</title></head><body><h1>記事のタイトル</h1><p>記事のテキスト</p></body></html>

iframe (アイフレーム)
インラインフレームを表示する。
【使用例】<iframe src=”img.jpg” width=”300″ height=”200″></iframe>

img (イメージ)
画像ファイルを表示する。
【使用例】<img src=”img.jpg” alt=”画像”>

input (インプット)
フォームの入力要素を作成する。
【使用例】<input type=”text” name=”name”>

label (ラベル)
フォームの入力項目名を表す。
【使用例】<label for=”name”>名前</label><input type=”text” name=”name”>

li (エルアイ、リスト)
リスト項目を表示する。
【使用例】<ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>

link (リンク)
指定した外部のリソースを参照する。
【使用例】<link rel=”stylesheet” href=”styles.css”>

meta (メタ)
HTML文書に関する情報(メタデータ)を示す。
【使用例】<meta charset=”UTF-8″>

nav (ナブ)
navigationの略。ナビゲーション示す。
【使用例】<nav><ul><li>トップページ</li><li>事業内容</li><li>会社概要</li></ul></nav>

ol (オーエル)
順序のあるリストを表す。
【使用例】<h1>簡単ハンバーグの作り方</h1><ol><li>ボウルに材料を入れて混ぜます。</li><li>形を整えて焼きます。</li><li>完成です。</li></ol>

optgroup (オプトグループ)
option要素グループを作成する。
【使用例】<optgroup label=”果物”><option label=”いちご” value=”sakura”>いちご</option><option label=”さくらんぼ” value=”melon”>さくらんぼ</option><option label=”ぶどう” value=”budou”>ぶどう</option></optgroup>

pre (プレ)
Preformatted Textの略。ソース内のスペースや改行をそのまま表示する。
【使用例】<pre>サイバーブリッジ株式会社はweb制作の他にも、情報セキュリティ対策やネットワークインフラの構築などを生業としています。</pre>
【ブラウザ上の表示】
サイバーブリッジ株式会社はweb制作の他にも、
情報セキュリティ対策やネットワークインフラの構築などを生業としています。

radio (ラジオ)
ラジオボタンを作成する。
【使用例】<form method=”post” action=””><p><input type=”radio” name=”hyouka” value=”good” checked=”checked”>良い<input type=”radio” name=”hyouka” value=”bad”>悪い</p><p><input type=”submit” value=”送信する”></p></form>

script (スクリプト)
JavaScriptなどのクライアントサイドスクリプトを埋め込む。
【使用例】<script src=”sample.js”></script>

span (スパン)
汎用的な範囲を示す。
【使用例】<p>ことだまwebデザインは<span>HTML&CSS初心者さん</span>を応援します。</p>

submit (サブミット)
送信ボタンを作成する。
【使用例】<button type=”submit”>送信する</button>

table (テーブル)
テーブル(表組み)を作成する。
【使用例】<tabel><caption>タイトル</caption><tr><td>テキスト左</td><td>テキスト右</td></tr></table>

tb (ティーディー)
Table Data Cellの略。テーブル(表組み)のセルを表す。
【使用例】<tabel><caption>タイトル</caption><tr><td>テキスト左</td><td>テキスト右</td></tr></table>

textarea (テキストエリア)
複数行のテキスト入力欄を作成する。
【使用例】<form method=”post” action=””><p>お問い合わせ内容</p><textarea name=”message”>ここに入力してください。</textarea><input type=”submit” value=”送信”><input type=”reset” value=”リセット”></form>

th (ティーエイチ)
Table Header Cellの略。テーブル(表組み)の見出しセルを表す。
【使用例】<tabel><caption>果物の特徴</caption><tr><th>種類</th><th>特徴</th></tr><tr><td>りんご</td><td>赤くて丸い</td></tr><tr><td>ドリアン</td><td>臭い</td></tr></table>

tr (ティーアール)
Table Rowの略。テーブル(表組み)の行を表す。
【使用例】<tabel><caption>果物の特徴</caption><tr><th>種類</th><th>特徴</th></tr><tr><td>もも</td><td>ハートを逆さまにした形</td></tr><tr><td>ドリアン</td><td>とにかく臭い</td></tr></table>

ul (ユーエル)
順序のないリストを表す。
【使用例】<nav><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></nav>

wbr (ワードブレイク)
Word Breakの略。改行が可能な位置を指定する。
【使用例】<nobr>サイバーブリッジ株式会社はweb制作の他にも、<wbr>情報セキュリティ対策やネットワークインフラの構築などを生業としています。</nobr>
【ブラウザ上の表示】
サイバーブリッジ株式会社はweb制作の他にも、
情報セキュリティ対策やネットワークインフラの構築などを生業としています。

HTML – 属性の読み方と用途

accept (アクセプト)
属性は送信データの文字エンコーディングを指定する。
【使用例】<form action=”” method=”post” accept-charset=”UTF-8″> ～ </form>

align (アライン)
要素内容の配置方向を設定する。
【使用例】<p style=”text-align:center;”>文字を中央に配置する</p>

alt (オルト)
img要素の中に記述される画像の代替となるテキスト情報。
【使用例】<img src=”img.jpg” alt=”画像”>

async (エーシンク)
非同期でJavaScriptを読み込む。
【使用例】<script src=”sample.js” async></script>

charset (キャラセット)
文字エンコーディングを指定する。
【使用例】<meta charset=”utf-8″>

class (クラス)
要素に名前をつけてグループ分けをする。※ページ内で複数使用可能
【使用例】<div class=”itembox”></div>

colspan (コルスパン)
テーブル(表組)の水平方向のセルの結合数を指定する。
【使用例】<tabel><caption>タイトル</caption><tr><td colspan=”2″>テキスト中央</td></tr><tr><td>テキスト左</td><td>テキスト右</td></tr></table>

defer (ディファー)
レンダリングができた時点で、スクリプトが実行されるようにUAに指示する。
【使用例】<script src=”sample.js” defer></script>

id (アイディー)
要素に名前をつけてグループ分けをする。※ページ内で1度しか使用できない
【使用例】<div id=”itembox”></div>

itemprop (アイテムプロップ)
Microdataでアイテムにプロパティを追加する。

lang (ラング)
言語を指定する。
【使用例】<html lang=”ja”>

method (メソッド)
フォームを送信する際の転送方法を指定する。
【使用例】<form action=”” method=”post”> … </form>

rel (レル)
リンク先となるリソースの位置づけを表す。
【使用例】<link rel=”stylesheet” href=”styles.css”>

required (リクワイヤード)
フォームの必須項目を示す。
【使用例】<form action=”” method=”post”>名前:<input type=”text” name=”name” required> ※入力必須<input type=”submit” value=”送信”></form>

rowspan (ロウスパン)
テーブル（表組）の垂直方向の見出しセルの結合数を指定する。

src (ソース)
Sourceの略。要素の場所を指定する。
【使用例】<img src=”imges/img.jpg” alt=”画像” >

srcset (ソースセット)
ブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む。

summary (サマリー)
テーブル(表組)の説明・要約を指定する。

この記事を書いた人

その他記事はこちら

久保田里佳子

Web事業部マネージャー / デザイナー

1992年生まれ。2児の母。入社後、営業を経て独学でhtml/css・Webデザイン・マーケティングを学び、現在はWeb関連全般に携わっています。趣味はお酒・ゲーム・漫画・アニメとかなりのインドアですが、たまにゴルフもやります。特技は超高速クッキング(見た目より味重視)。全てのお客様が笑顔になる仕事を心がけてます。

その他記事はこちら