HTMLの構造
HTMLは「ヘッダ部」と「ボディ」部で構成されています。
<!DOCTYPE html>
<!-- htmlファイルであることを示します -->
<html>
<head>
<!-- 「ヘッダ部」と呼ばれ、ページの設定などを書きます ↓例（titleタグなど） -->
<title>ここにタイトルを書きます。</title>
</head>
<body>
「ボディ部」と呼ばれ、ブラウザに表示するwebページの内容を書きます
</body>
</html>
#####HTML要素の一般的な呼ばれ方（名称）について
- 要素（エレメント）
<div id="attribute">おはようございます</div> - 要素名
div - タグ
<div id="attribute"></div> - 属性（プロパティ）
id="attribute" - 属性名
id - 属性値
attribute - 内容（コンテンツ）
おはようございます
HTMLタグとは
<>で囲っているもの。かなりの数があります。
基本的には、開始タグと終了タグで挟んで書いていきます。タグによっては開始タグと終了タグで挟まずに書くもの（空タグ）もあります。
<p> ⇦開始タグ
<p>は段落を指定するタグで<p>〜</p>で囲われたテキストは１つの段落であることを示します。
</p> ⇦終了タグ
<br /> ⇦空タグ <br />は改行を表すタグ。
<br></br> こちらでも可
###「インライン要素」と「ブロック要素」
タグは「インライン要素」と「ブロック要素」と呼ばれるものに分けられます。
インライン要素は横並びに要素を配置したい場合に使用し、ブロック要素は縦並びにしたい場合に使用します。**※HTMLは基本的に改行は無視されるためこの使い分けが重要になります。**使用するタグがどちらに分類されるのかを先に見るようにするといいと思います。
######「インライン要素」と「ブロック要素」の代表的なタグ
- インライン要素
<span></span>
特に意味を持ちませんが、囲った部分をグループ化し、複数のタグをまとめるために使用するタグ。CSSと合わせてスタイル・レイアウト調整をするのに非常によく使います。 - ブロック要素
<div></div>
こちらも特に意味を持ちませんが、spanタグと同様に複数のタグをまとめるために使用します。CSSと合わせてスタイル・レイアウト調整をするのに非常によく使います。違いは囲った部分が改行されるかどうか。
実際に書いてみよう
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<!-- <script src="js/jquery-3.3.1.min.js"></script> -->
<title>タイトル</title>
</head>
<body>
<main>
<span>あいうえお</span>
<span>かきくけこ</span>
<div>あいうえお</div>
<div>かきくけこ</div>
</main>
</body>
</html>
基本的なタグ
tagtest.html
<p>
この文章は
改行しません。
この文章はここで<br />改行します。
</p>
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>
<p>あいうえおかきくけこ</p>
<p>さしすせそたちつてと</p>
宿題
内に記述するタグは以外にどんなものがあるか調べましょういろいろなタグを試してみよう
emタグ、iタグ、strongタグ、bタグ
文字の強調（斜体）
em_i_example.html
<p>emタグは<em> 強調（斜体）</em>で表示されます。</p>
<p>
iタグは<i> 強調（斜体）</i
>で表示されます。専門用語や慣用句などのキーワードに使用されます。
</p>
文字の強調（太字）
strong_b_example.html
<p>
strongタグは<strong> 強調（太字）</strong
>で表示されます。重要性を表します。
</p>
<p>
bタグも<b> 強調（太字）</b
>で表示されます。em、i、strongのどれにも当てはまらない場合に使用します。
</p>
####hrタグ
水平線を表示できます。
hr_example.html
<hr />
<h1>見出しA</h1>
<p>
hrは水平線を表示します。hrは水平線を表示します。hrは水平線を表示します。hrは水平線を表示します。hrは水平線を表示します。
</p>
<hr />
<h1>見出しB</h1>
<p>
hrは水平線を表示します。hrは水平線を表示します。hrは水平線を表示します。hrは水平線を表示します。hrは水平線を表示します。
</p>
<hr />
imgタグ
画像を表示したいときに使用します。imgで表示することができるのは、JPGやPNG、GIF、SVGなどの画像形式だけです。PDFデータや動画データを表示することはできません（GIFアニメーションは貼ることができます）。
img_example.html
<p>
<img
src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg"
alt="サルワカくんの顔"
/>
</p>
aタグ
リンクを表示したい時に使用します。
link_example.html
<p>
<a href="https://saruwakakun.com/"> これはリンクです。 </a>
</p>
<p>画像にリンクをつけることも可能<br />顔を踏んでね↓</p>
<p>
<a href="https://saruwakakun.com/">
<img
src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg"
alt="サルワカくんの顔"
/>
</a>
</p>
<ul>と<li>のペア、もしくは<ol>と<li>のペア
ulとliで順序のないリストを表示します。
ul_list_example.html
<ul>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ul>
olとliで順序のあるリストを表示します。
ol_list_example.html
<ol>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ol>
tableタグ
表を表示できます。tableの属性名borderは枠線の設定になります。
-
caption表の名前を表示するタグです。 -
thead表のヘッダ行をグループ化するタグです。 -
tbody表のボディ部分をグループ化するタグです。 -
tr表の行を指定するタグです。この中でth、tdタグを指定します。 -
th表の見出しやタイトルとなるヘッダセルを作成するタグです。デフォルトでセンタリングされ太字になります。 -
td表のセルのを作成するタグです。
table_example.html
<table border="1">
<caption>
表１
</caption>
<thead>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>セミナー名</td>
<td>1日速習HTML・CSSセミナー</td>
</tr>
<tr>
<td>開催日時</td>
<td>2020年10月31日</td>
</tr>
<tr>
<td>開催場所</td>
<td>大阪市内セミナールーム</td>
</tr>
<tr>
<td>参加費用</td>
<td>11,000(税込)</td>
</tr>
</tbody>
</table>
HTMLの雛形（参考）
https://html-coding.co.jp/annex/dictionary/html/
https://webst8.com/blog/html-major-basic-tag/
https://saruwakakun.com/html-css/basic/html