HTMLのタグの種類は多いですが、今回は必要最低限（＝必ず使うもの）について説明します。
タグの記述サンプルと、表示サンプルを参考に、マスターしましょう。
レイアウト用のタグ
ページは、セクションに分けてマークアップすることが基本です。
また、文字やエリアの色を変える場合などは、そのタグ自体には意味がないが汎用的に使えるタグがあります。
ヘッダー、フッター、メインコンテンツ
ヘッダー、フッター、メインのタグは、bodyタグの中に書きます。
ID名「wrapper」のdivタグは全体をくくるための汎用タグ（スタイルをつけるときに使われる要素）です。
<body>
/* レイアウト用のタグ */
<div id="wrapper">
<header></header>
<main></main>
<footer></footer>
</div>
</body>セクション
sectionタグの中には、h2などのタイトル要素が必要です。
タイトルがないセクションは、divタグを使って実装します。（メインビジュアルなど）
<body>
/* レイアウト用のタグ */
<div id="wrapper">
<header></header>
<main>
<section></section>
<section></section>
</main>
<footer></footer>
</div>
</body>その他、汎用的に使えるタグ
上記で出てきたdivタグや、文字のスタイルを一部変更するときに使うspanタグは、汎用的に使うタグです。
- div … ブロック型の汎用タグ。幅や高さ、余白の設定が可能
- span … インライン型の汎用タグ。幅や高さ、余白の設定は基本行わない
タグ自体には意味はありません。クラス名をつけて、スタイルを付与する際に使用することが多いです。
<body>
/* レイアウト用のタグ */
<div id="wrapper">
<header></header>
<main>
<div class="mainvisual">
<p>キャッチコピー</p>
<p><span class="underline">説明文</span>を入れる予定です。</p>
</div>
<section></section>
<section></section>
</main>
<footer></footer>
</div>
</body>その他、よく使われるタグ
デザインを見ながら、上から順に見て、よく使われるタグをマスターしましょう。
画像（ロゴなど）
ヘッダー内にあるロゴ、SNSリンク用のアイコン画像、自画像、作品画像などは、imgタグを使用します。
src属性には、画像ファイルのパスをセットします。
VS Codeでは、作業フォルダを開いた状態で現在のHTMLにてsrcの””の中で「./」を入力すると、現在位置からのファイル参照が起動して、ファイルパスをセットできます。
alt属性には、その画像が意味する内容を記載します。
ページ表示の際に万が一画像が取得できない場合に、altの内容が代替テキストとしてブラウザに表示されます。
imgタグには、コンテンツ部分がないので、閉じタグがありません。
背景画像としてセットしたい場合はimgを使わず、要素へのCSS設定を行います。
（ブラウザの印刷設定では、デフォルトでは背景画像が表示されません。その画像がなくても意味が通る場合に背景としてセットします）
<body>
/* レイアウト用のタグ */
<div id="wrapper">
<header>
<h1><img src="img/logo.png" alt="Creator Portfolio" class="logo"></h1>
</header>
<main>
<div class="mainvisual">
<p>キャッチコピー</p>
<p><span>説明文</span>を入れる予定です。</p>
</div>
<section>
<h2>Profile</h2>
<img src="img/1.jpg" alt="トビサワマキ">
</section>
<section></section>
</main>
<footer></footer>
</div>
</body>リスト（メニュー項目、SNS一覧など）
箇条書き、リスト構造の場合は、ulタグでくくります。
各項目は、liタグでくくります。
liの中にulとliのセットを入れると、子リストを作ることができます。
<section>
<h2>Profile</h2>
<img src="img/1.jpg" alt="トビサワマキ">
<div class="col2">
<h3>出身</h3>
<p>神奈川県</p>
</div>
<div class="col2">
<h3>担当講座等</h3>
<ul>
<li>デジタルハリウッド（専門スクール）STUDIO 講師/トレーナー
<ul>
<li>デジタルハリウッドSTUDIO自由が丘 木曜17:00-22:00</li>
<li>デジタルハリウッドSTUDIO青森 PHP/JavaScript講師</li>
<li>ライブ授業 Googleアナリティクス基礎講座（隔月） 担当講師</li>
</ul>
</li>
<li>デジタルハリウッド（オンラインスクール）講師
<ul>
<li>ライブ授業 Webサイト分析</li>
<li>オンラインスクール/STUDIO向け WordPress講座 担当講師</li>
</ul>
</li>
<li>和光大学 表現学部 芸術学科 非常勤講師</li>
</ul>
</div>
<div class="col2">
<h3>経歴等</h3>
<ul>
<li>システムエンジニアを十数年経験後、2010年よりフリーランスへ。</li>
<li>デザインからコーディング、プログラミング、サーバー運用相談まで対応。</li>
</ul>
</div>
</section>アンカー（ロゴ→サイトトップ、メニュー→各ページや外部URLなど）
クリックしたら別ページやページのセクションなどに飛ばしたい場合は、aタグを使います。
ヘッダーのロゴをaタグでくくった場合、サイトルート（＝トップページのURL）を入れます。
href属性に / をセットすると、「ドメインルート」という意味になります。
（例：「https://XXX.com/」 と「/」 は同じ場所の意味）
href属性に #profile をセットすると、クリックした際に ID名「profile」の要素へ飛びます。
aタグはブロック型の大きい要素、文字や画像なども囲むことができます。
<header>
<h1><a href="/"><img src="img/logo.png" alt="Creator Portfolio" class="logo"></a></h1>
<ul class="gnav">
<li><a href="#profile">Profile</a></li>
<li><a href="#skill">Skill</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<main>
<div class="mainvisual">
<p>キャッチコピー</p>
<p><span>説明文</span>を入れる予定です。</p>
</div>
<section id="profile">
<h2>Profile</h2>
<img src="img/1.jpg" alt="トビサワマキ">
<div class="col2">
<h3>出身</h3>
<p>神奈川県</p>
</div>aタグのリンク先には、メールアドレスや電話番号も設定できます。
アンカー要素の例：
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/a#%E4%BE%8B
SNSなど、他サイトのリンクをブラウザの別タブで開くようにしたい場合は、以下のように設定しましょう。
<a href=”リンク先のURL” target=”_blank” rel=”noopener noreferrer”>リンク先の名前</a>
タイトル（見出し）
h1からh6は、見出し・タイトルです。
ページタイトルはページに1つだけ設定し、h1タグでくくります。
セクションには必ずセクションタイトルを置きます。h2でくくります。
h3からh6は、子要素に適宜使用します。
h1から順に使用しなければならないので、例えばh2がなくてh3を置く、というのはNGです。
（ブラウザのデフォルト文字サイズを見て、好みでレベルを選んではいけません）
<header>
<h1><a href="/"><img src="img/logo.png" alt="Creator Portfolio" class="logo"></a></h1>
<ul class="gnav">
<li><a href="#profile">Profile</a></li>
<li><a href="#skill">Skill</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<main>
<div class="mainvisual">
<p>キャッチコピー</p>
<p><span>説明文</span>を入れる予定です。</p>
</div>
<section id="profile">
<h2>Profile</h2>
<img src="img/1.jpg" alt="トビサワマキ">
<div class="col2">
<h3>出身</h3>
<p>神奈川県</p>
</div>文章
タイトル以外の文章はpタグでくくります。段落ごとに1つのpタグとなります。
スタイルが異なる文も、別のpタグにしておきましょう。
空白行が入るような文章の区切りがある場合は、別のpタグとして分けます。
brタグを使うと改行を入れることができますが、brタグを連続でセットして見た目の余白を確保することはしません。
pタグの下の余白は、あとでCSSを使って設定します。
<header>
<h1><a href="/"><img src="img/logo.png" alt="Creator Portfolio" class="logo"></a></h1>
<ul class="gnav">
<li><a href="#profile">Profile</a></li>
<li><a href="#skill">Skill</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<main>
<div class="mainvisual">
<p>キャッチコピー</p>
<p><span>説明文</span>を入れる予定です。</p>
</div>
<section id="profile">
<h2>Profile</h2>
<img src="img/1.jpg" alt="トビサワマキ">
<div class="col2">
<h3>出身</h3>
<p>神奈川県</p>
</div>pタグの中で明示的に改行したい場合はbrタグを使います。
例）
<p>心理教育学科 子ども教育専修（初等教育課程）は、和光学園の小学校と連携して、7月の小学校林間合宿に指導員として参加します。大学では合宿に備え、「学校インターンシップ」授業内で火おこし体験を行いました。実際に薪を組み、火がつくか試行錯誤。<br>
先生を目指す学生たちは、直接子どもたちと過ごす林間合宿を楽しみにしています。</p>
表
表は、例えば以下のように「項目名」「内容」の連続が続くようなケースで使用します。
tableタグで全体をくくります。
trタグは行を意味します。
行の中にタイトルセルを意味するthタグと、データセルを意味するtdタグが入る場合の例となります。
<body>
<table class="basic">
<tr>
<th>テーマと到達目標</th>
<td>この授業ではWebデザインの基礎･Webサイトの構築、表現方法を学ぶ。<br>
最終的にWebのポートフォリオサイト制作ができることを目標とする。</td>
</tr>
<tr>
<th>概要</th>
<td>Webデザイン・ユーザーインターフェイスデザインの学習。<br>
Webサイトの言語（HTML、CSS）を使った実装を学ぶ。</td>
</tr>
</table>
</body>
