Lesson03 – HTML
目次
HTMLタグの種類（a,img,強調,改行,注釈）
リンクや画像配置、意味的な強調、改行、注釈などの役割を与えるタグです。
<a>
WEBページどうしをリンクさせるためのタグです。<a>タグのaはアンカー（＝船と港を繋げるイカリのこと）から来ていて、ひっかけるイメージ。
開始タグと終了タグの間にある要素にリンクを貼ることができます。
加えて、具体的にどこにリンクしたいのか＝リンク先を「href属性」で指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
リンク先の例
①同じページの一番上に戻る
例）<a href=”#”>ページトップに戻る</a>
②外部サイトへリンクを貼る
例）<a href=”https://google.co.jp”>Googleへ飛びます</a>
※開始タグ内にtarget=”_blank” rel=”noopener noreferrer”の記述を入れることで別タブで開くことができます
③別のHTMLのリンクを貼る
例）<a href=”link.html”>リンクページ</a>
※ファイルまでの道筋を表す「パス」を書いてリンクさせるファイルを指定します。
パスの考え方
1.index.htmlからlink.htmlにアクセスしたい
ファイルとファイルが同じ階層にいるため、ファイル名をそのまま記述
<a href=”link.html”>でlink.htmlにリンクする
2.index.htmlからlink.htmlにアクセスしたい
アクセスしたいファイルが1つ下の階層にいるため、「フォルダ名/ファイル名」でパスを記述
<a href=”sample/link.html”>でsampleフォルダ内のlink.htmlにリンクする
3.link.htmlからindex.htmlにアクセスしたい
アクセスしたいファイルが1つ上の階層にいるため、「../ファイル名」でパスを記述
<a href=”../index.html”>でlink.htmlからindex.htmlにリンクする
<img>
画像を挿入するためのタグです。ファイルの場所を指定する「src属性」に、具体的に表示させる画像のパスを記述します。
<img>タグ内に記述するので、終了タグはありません
「alt属性」は、src=””で指定した画像が読み込めなかったときに代わりに表示させるテキスト情報を指します。また、ブラウザが認識できる文字情報なので、SEOの観点から重要なキーワードを入れておくケースが多いです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<strong>・<em>
どちらも強調したい場合に使用するタグですが、使い方に違いがあります。
strongは主に「重要性」「深刻性」「緊急性」を示すために使用し、文章全体の意味を変更しません。
それに対しemはタグで囲んだキーワードに重きを置いて強調し、文章全体の意味を変更させます。（意図を伝えるようなイメージです）
CSSで手を加えないかぎり、strongは太字、emは斜体で表示されます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<br>
長い文章を途中で改行させるために使用するタグです。終了タグはありません。
見た目を整えるために余白を空けたい場合は<br>タグではなくCSSにて設定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<small>
注釈、免責事項、著作権などの法的な表記などを記述するときに使用します。
CSSで手を加えないかぎり小さな文字で表示されます
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<address>
問い合わせ先などを指定するためのタグです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
HTMLタグの種類（divとspan）
divとspanは共に「意味を持たない汎用的な範囲」を作ることができるタグです。
<div>
汎用的な範囲指定ができるブロックレベル要素のタグです。
見出しや段落、リストなどいくつかの要素をまとめて範囲を指定するときに使用します。
主にデザインを作る上で分類したい時に使います。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<span>
例えば文章や見出しなどの一部分を範囲を指定できるインライン要素のタグです。
<div>同様、主にデザインを作る上で何か特別な箇所に命令を出したいときに使います。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
| ブロックレベル要素 | インライン要素 | |
| 特徴 | ブロック（塊） | 要素の一部 |
| 改行 | 前後に改行が入る | 前後に改行は入らない |
| 種類 | ・見出しタグ h1~h6 ・段落 p ・リスト ul ol dl ・範囲を指定するタグ divなど など | ・リンク a ・画像 img ・強調 em strong ・範囲を指定する span ・注釈 small など |
HTMLタグの種類（特定の範囲を指定する）
ページのこの部分、この要素など特定の範囲指定を行うタグです。
<header>
ページの上部にあるヘッダーと呼ばれる箇所をグループ化するためのタグです。
ページタイトル、ロゴ画像、ナビゲーションメニュー等を含みます。
制作者によってどこまでをヘッダーの範囲とするかは異なり、また上に書いた別の要素を含む場合もあります。
ページのメインとなるナビゲーションメニュー（グローバルナビゲーションと言います）を作るためのタグです。
補足的なナビゲーションやただのテキストリンクはnavを使う必要はありません。
<article>
読み物、記事を範囲指定するためのタグです。
例えば、ニュースやブログサイトの記事など、その部分を切り取って見ても独立した内容になっているものをさします。
ブログ、ニュース以外でも記事として成立していればarticleで囲みます。
<section>
ページ内に章・節・項などを範囲指定するためのタグです。
含んだ範囲を一つのセクションとして区切り、1章、2章、3章のようにテーマごとに情報を分ける場合に使用します。
ページ最下部のフッター部分を囲むためのタグです。
サイトタイトルやナビゲーションメニューの内容、著作権表記、問い合わせ先やSNS情報などを載せます。
<aside>
メインコンテンツではない補足情報を作るためのタグです。
例えばブログページの右にあるアーカイブ情報やカレンダー機能など、メインのコンテンツ以外の補足情報をまとめておくために使用します。
HTMLタグの種類（表組み）
例えば料金表のような表組みを作るためのタグです。
Table tag Generatorを使うことで複雑な表組みでも簡単に作成することができますが、ここではそれぞれの要素を解説します。
<table>
表組み全体を囲むためのタグです。
例）3列×3行の表組み
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<tr>
行を指定するためのタグです。1行を1対のtrタグで囲みます。
<th>
見出しセルを指定するためのタグです。1つの見出しセルを一対のthタグで囲み、内容を入力します。
<td>
通常セルを指定するためのタグです。1つの通常セルを1対のtdタグで囲み、内容を入力します。
HTMLタグの種類（フォーム）
お問い合わせフォームなどを作る時に使用するフォームタグです。
<form>
フォーム全体を囲むためのタグです。開始タグと終了タグでフォームの中の要素を囲みます。
開始タグ内に必ず「action属性」と「method属性」を記述します。
action属性
入力した情報をどこに送るのかの指定をします。通常、送り先はcgiというファイルのパスを記述します。
無料CGIツール：https://www.php-factory.net/mail/01.php
method属性
入力した情報の送信方法を指定します。値は「post」「get」のどちらかです。
getを指定した場合は送れる文字数に上限があります。（約2,083文字）
<input>
formの中で入力欄やボタンなどを作成するためのタグです。
開始タグの中に、主に以下のものを記述します。
・type属性＝何を入力するためのものなのか
・name属性＝その情報を送信した時に補足説明となる内容
・value属性＝表示、送信される値
ここではテキスト入力・メールアドレス入力・ラジオボタン・送信ボタン・テキストエリアを紹介します。
テキスト入力欄（type=”text”）
文字を入力するための入力欄です。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
メールアドレス入力欄（type=”email”）
メールアドレスを入力するための入力欄です。メールアドレス以外が入力されるとエラーを返します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
ラジオボタン（type=”radio”）
複数の選択肢の中から一つを選ばせたい時に使うためのボタンです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
送信ボタン（type=”submit”）
formの中で入力した情報を送信するためのボタンです。
このボタンを押すと、<form>タグのaction属性で指定したプログラム（cgi）に情報が送られます。
value属性の内容は、送信ボタンに表示されます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
テキストエリア（textarea）
複数行の文字を入力できるテキストエリアを作るためのタグです。
開始タグと終了タグができますが、特に内容を持つわけではありません。「cols」は横に並ぶ文字の数、「rows」で縦に並ぶ文字の数を指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
参考リンク
・実はヤバい？aタグと別タブで開く（target=”_blank”）の使い方
https://wwg.co.jp/blog/3807#31
・HTMLの入れ子とは？ルールについて
https://webtan.tech/how_to_nest/
・W3C文法チェックツール
https://validator.w3.org/
・テーブル生成ツール
https://tabletag.net/ja/
・CGI フリー
https://www.php-factory.net/mail/01.php
・Web制作｜フォルダ構造の考え方やオススメの構成を紹介！【HTML／CSS】
https://pengi-n.co.jp/blog/folder-structure/
