タグ（名称の説明） 主な属性値 コード例 表示 補足
<a>
anchorタグ		 href <a href="https://netaro-n.github.io/basic-programming-roadmap/css-sheet.html" target="_blank">CSSシートへ</a> CSSシートへ
<abbr>
abbreviation＝"略語"		 title <abbr title="HyperText Markup Language">HTML</abbr> HTML 単語にカーソルを置いてしばらく待ってください。
title属性を用いることで略語の説明が可能。
<b> <b>見かけ上の太字</b> 見かけ上の太字 最終手段。見出しはhタグ。意味の強勢はemタグ、さらに重要な強調はstrongタグを使用。
<blockquote> cite <blockquote cite="https://www.aozora.gr.jp/cards/000148/files/789_14547.html"> <p>吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p> </blockquote>
吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
pタグで入れ子にし、ブロックボックスでサイトの引用を表す。文章中などでインラインとして引用を表したい場合はqタグを使用
<br>
breakタグ		 ここで<br>改行</br> ここで
改行
<button> type属性
submit（送信）,reset（リセット）,button（何もしない）		 <button type="button" value="ボタンです">valueよりも優先的に表示</button> フォームで用いる。同様の<input type="submit">と違うのは、属性とデザインが自由。
<cite> 夏目漱石は３８歳の時<cite> 吾輩は猫である</cite>を執筆した。 夏目漱石は３８歳の時吾輩は猫であるを執筆した。 作品のタイトルのみを表す。
<code> <code>document.write("ソースコードを表示させる")</code> document.write("ソースコードを表示させる") 改行やインデントを反映させる為にはpreタグの子要素にする
preタグを参照
<dd>
description , definition
説明や定義		 詳細は<dl>タグで。 詳細は<dl>タグで。 詳細は<dl>タグで。
<div>
division		 <div>ブロック要素を形成1</div> <div align="center">ブロック要素を形成2</div> <div align="right">ブロック要素を形成3</div>
ブロック要素を形成1
ブロック要素を形成2
ブロック要素を形成3
 特に意味を持たないが、ブロック要素を形成できる。spanタグはインライン要素を形成。
<dl>
description list		 <dl>
<dt>dlタグで「説明リスト」の作成</dt>
<dd>dtタグで「説明される言葉」など</dd>
<dd>ddタグで「説明や定義」を書く</dd>
</dl>
dlタグで「説明リスト」の作成
dtタグで「説明される言葉」など
ddタグで「説明や定義」を書く
 dlタグの子要素にdtとdd。デーブルと似た感じ。
<dt>
description term
説明される言葉		 詳細は<dl>タグで。 詳細は<dl>タグで。 詳細は<dl>タグで。
<em>
emphasis		 HTML5では<em>強勢する</em>（アクセントを付ける） HTML5では強勢する（アクセントをつける） 意味の強勢（アクセント）。
イタリック体（斜傾）なら<i>タグ、意味の強意強調が目的なら<strong>タグを使用
<fieldset> <form action="/">
<fieldset>
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男</label></p>
<p><label><input type="radio" name="sex" value="female">女</label></p>
</fieldset>
<fieldset>
<legend>国籍</legend>
<p><label><input type="radio" name="nation" value="japan">日本</label></p>
<p><label><input type="radio" name="nation" value="foreign">海外</label></p>
</fieldset>
</form>
性別

国籍

フォーム内の項目をグループ化することができる。 legendタグでグループ名をつけることができる。
<form> method , action <form action="/" method="post">
<p><input type="radio" name="method" value="post">POST</p>
<p><input type="radio" name="method" value="get">GET</p>
<p><input type="reset" value="リセット"></p>
</form>

POST

GET

 POSTは内容が暗号化されて送信される（フォームの送信に適している）。
GETは内容がURLに付加されて渡される（短いデータやキーワードに適している）。
<h●>
Headingタグ 		<h1>1大見出し</h1>
<h2>2小見出し</h2>
<h3>3小見出し</h3>
<h4>4小見出し</h4>
<h5>5小見出し</h5>
<h6>6小見出し</h6>

1大見出し

2大見出し

3大見出し

4大見出し
5大見出し
6大見出し
※デザインの都合上、表示は横に並べています。
h1 ~ h6の使い方についてはこちら
<hr>
horizontal rule		 <p>horizontal rule</p><hr><p>＝水平線を引ける。</p>

horizontal rule

＝水平線を引ける。
<i> 山路やまみちを登りながら、こう考えた。
<i>智ちに働けば角かどが立つ。
情じょうに棹さおさせば流される。
意地を通とおせば窮屈きゅうくつだ。
とかくに人の世は住みにくい。</i> 		山路やまみちを登りながら、こう考えた。智ちに働けば角かどが立つ。情じょうに棹さおさせば流される。意地を通とおせば窮屈きゅうくつだ。とかくに人の世は住みにくい。 心の声など、他と区別したい文や語句に用いる。表示としてはイタリック体（斜傾）になる。
<iframe>
inline frame		 width（幅）, height（高さ）, src（そのページのURL） <iframe width="280" height="157" src="https://www.youtube.com/embed/wzzD6Y4eqHc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 他のページを埋め込むことができる。
サザンを愛しています。
<img>
imageタグ		 src, alt, title <img src="madrid.jpeg" alt="ロゴ" title="レアルのロゴ" width="100px" height="100px"> ロゴ src属性に画像のURLやファイル名を記述して表示させる。
<input> text, password, radio, checkbox, submit <form action="/" method="POST">
<p>text：<input type="text" name="name" size="20" maxlength="18" placeholder="一行のテキスト"></p>
<p>password：<input type="password" name="pass" size="10" maxlength="8"></p>
<p>radio（１個だけ）：
<input type="radio" name="size" value="large">大
<input type="radio" name="size" value="middle">中
<input type="radio" name="size" value="small">小
</p>
<p>checkbox（複数可）：
<input type="checkbox" name="review" value="fun">面白い
<input type="checkbox" name="review" value="useful">役に立つ
<input type="checkbox" name="review" value="impressed">感動する
</p>
<input type="submit" value="無効化されてます" disabled>
</form>

text：

password：

radio（１個だけ）： 大 中 小

checkbox（複数可）： 面白い 役に立つ 感動する

formタグ内で利用します。 複数行の文章を記入させたい場合はinput:text ではなく、textareaタグを用いる。
<label> for ,form（詳しくはググって） <form action="">
<p><label for="name">名前：</label><input type="text" id="name"></p>
<p><label>年齢：<input type="text" name="age"></label></p>
</form>

部品名をクリックしても反応すると思います。
以下の方法でフォーム内の部品とラベルを関連づけることができる。
①for属性名と部品のid属性名を一致させる（名前のとこ）
②labelタグにフォーム部品を入れ子にする（年齢）
<legend> fieldsetタグ内のキャプション（タイトルや説明）ができる。
fieldsetタグの説明を参照してください。
<li> リストを作成します。
olタグ、liタグを参照してください。
<ol>
ordered list		 <ol> <li>松</li> <li>竹</li> <li>梅</li> </ol>
  1. 松
  2. 竹
  3. 梅
 「順序のあるリスト」を作成する。
「順序のないリスト」はulタグ
<optgroup>
オプショングループタグ		 label ,disabled <p> ※disabled属性によって、「S席＋A席の大人」は売り切れとしています。 </p>
<p>
<label>券種:
<select name="ticket">
<option selected>▼座席の種類を選んでください</option>
<optgroup label="S席" disabled>
<option value="s01">大人</option>
<option value="s02">子ども</option>
</optgroup>
<optgroup label="A席">
<option value="a01" disabled>大人</option>
<option value="b02">子ども</option>
</optgroup>
<optgroup label="自由席">
<option value="f01">大人</option>
<option value="f02">子ども</option>
</optgroup>
</select>
</label>
</p>

※disabled属性によって、「S席＋A席の大人」は売り切れとしています。

selectタグとoptionタグによって作成される選択肢を、さらにグループに分けて細分化することができます。
label属性は必須でグループの名称を。disabled属性は、そのグループを選択不可にすることができます。
<option> value,selected,disabled <p> <label for="team">チームを選択：</label>
<select id="team" name="team">
<option value="rm" >レアル・マドリード</option>
<option value="bl" disabled>バルセロナ</option>
<option value="am">アトレティコ・マドリード</option>
</select> </p>
<p> <label for="t">チームを検索：</label>
<input type="search" id="t" name="t" autocomplete="on" list="keywords">
<datalist id="keywords">
<option value="RealMadrid">レアル</option>
<option value="Barcelona">バルサ</option>
<option value="AtleticoMadrid">アトレティコ</option>
</datalist> </p>

selectタグまたはdatalistタグの要素として選択肢を作成できる。
formによってvalue属性の値を送信可能。
<p>
Paragraphタグ 		<p>段落を構成します。</p><p>自動的に改行されます。</p>

段落を構成します。

自動的に改行されます。
<pre>
preformatted text		 <pre><code>items配列をcopy配列に入れる動作を、for文とforEach文で実行している。
const items = ['item1', 'item2', 'item3'];
const copy = [];
//before
for (let i=0; i < items.length; i++) {
copy.push(items[i])
}
//after
items.forEach(function(item){
copy.push(item)
});
</code></pre> 
items配列をcopy配列に入れる動作を、for文とforEach文で実行している。
          const items = ['item1', 'item2', 'item3'];
          const copy = [];
           //before
          for (let i=0; i < items.length; i++) {
            copy.push(items[i])
          }
           //after
          items.forEach(function(item){
            copy.push(item)
          });
半角スペースや改行が、そのまま反映されます。
codeタグと組み合わせて用いることで、例えばWordPressなどのブログ記事でソースコードを表示させることができます。
<q>
quotationタグ		 cite 太宰治の走れメロスの冒頭は
<q cite="https://www.aozora.gr.jp/cards/000035/files/1567_14913.html">
メロスは激怒した</q>と始まる。 		太宰治の走れメロスの冒頭はメロスは激怒したと始まる。 引用句、引用文であることを表す。
ブラウザでは「 」や”　”で表されることが多いが、その表記を目的に用いることは不適切。
cite属性に引用元のURLを指定するが、作品のタイトルを表すciteタグと混同しないよう注意。
<select> multiple <p> <label for="language">言語を選択してください：</label>
<select id="language" name="language">
<option value="en">英語</option>
<option value="de">ドイツ語</option>
<option value="fr">フランス語</option>
<option value="ja" selected>日本語</option>
<option value="zh">中国語</option>
</select> </p>
<p> <label for="languages">複数選択可：</label>
<select id="languages" name="languages" multiple size="5">
<option value="en" selected>英語</option>
<option value="de" selected>ドイツ語</option>
<option value="fr" selected>フランス語</option>
<option value="ja" selected>日本語</option>
<option value="zh">中国語</option>
</select> </p>

labelのfor属性とselectのid属性名を一致させることで、対応させることができる。
またmultiple属性によって複数の選択を可能にする。Macではcommand＋クリックで複数選択可能。
<span> <p>光の三原色：<span style="background-color: RED">赤</span>
<span style="background-color:#33CC33">緑</span>
<span style="background-color:#0099FF">青</span></p>

光の三原色：赤 緑 青

 divのブロックレベル要素に対して、spanはインライン要素となる。
それ自体に意味は持たないが、例のように属性との組み合わせで工夫ができ便利。
<strong> <strong>※注意※</strong> ※注意※ 強い重要性を表す。強勢を表すemタグよりも強い強調。
<table> <table>
<tr> <th>tr</th> <td>テーブルライン。横一行を作る。よく忘れる。</td> </tr>
<tr> <th>th</th> <td>見出しのセル。一般的なブラウザでは太字になる。</td> </tr>
<tr> <th>td</th> <td>データセル</td> </tr>
</table>
tr テーブルライン。横一行を作る。よく忘れる。
th 見出しのセル。一般的なブラウザでは太字になる。
td データセル
tr,th,tdと用いることでテーブル（表）を形成する。
このサイト全体も巨大なテーブルである。
<tbody>
table body		 <table>
<thead>
<tr> <th>順位</th> <th>タイトル</th> <th>アーティスト名</th> <th>売上枚数（万枚）</th> </tr>
</thead>
<tbody>
<tr> <th>1位</th> <td>およげ!たいやきくん</td> <td>子門真人</td> <td>457.7</td> </tr>
<tr> <th>2位</th> <td>女のみち</td> <td>宮史郎とぴんからトリオ</td> <td>325.6</td> </tr>
<tr> <th>3位</th> <td>TSUNAMI</td> <td>サザンオールスターズ</td> <td>293.6</td> </tr>
</tbody>
<tfoot>
<tr><td colspan="4">歴代CDシングル売り上げ枚数ランキング</td></tr>
</tfoot>
</table>
順位 タイトル アーティスト名 売上枚数（万枚）
1位 およげ!たいやきくん 子門真人 457.7
2位 女のみち 宮史郎とぴんからトリオ 325.6
3位 TSUNAMI サザンオールスターズ 293.6
歴代CDシングル売り上げ枚数ランキング
行単位でテーブルの中身（body）を定義することができる。
thead,tfootと共に用いて見やすいコードになる。
<td>
table data		 tableタグを参照 tableタグを参照
<textarea> rows, cols, autofocue, maxlength, placeholder, required <textarea cols="40" rows="4" placeholder="placeholder属性で入力ヒント"></textarea> <input type="text"> とは異なり、複数行のテキスト入力ができる。
cols属性は、一行当たりの最大文字数の目安を指定。初期値２０（半角）。
rows属性は、表示行数を指定する際に使用。初期値２。
その他maxlength属性など様々な属性があって便利。
<tfoot>
table footer		 コードはtbodyタグを参照してください。 行でテーブルのフッタ（footer）を定義することができる。
tbody,theadと共に用いて見やすいコードになる。
<th>
table header cell		 tableタグを参照。 見だしセル。
<thead>
table header		 コードはtbodyタグを参照してください。 行でテーブルのヘッダ（body）を定義することができる。
tbody,tfootと共に用いて見やすいコードになる。
<tr>
table row		 tableタグを参照。 横一行を構成する。これを設定してth,tdを使える。
<ul>
unordered list		 <ul> <li>桜</li> <li>すみれ</li> <li>ひまわり</li> </ul>
  • 桜
  • すみれ
  • ひまわり
 「順序のないリスト」を作る。
「順序のあるリスト」はolタグ。