生徒HTMLでWEBページを作りたいです
先生HTMLでよく使うタグの書き方や使い方を説明します
文章を書く p タグ
文章を書くのにはpタグを使用します。
文章の段落や塊ごとにpタグを閉じる形で書きます。
特定の範囲を指定する span タグ
特定の範囲をインライン要素として定義するのにspanタグを使います。
改行を行う br タグ
文章の改行位置を指定するにはbrタグを使用します。
閉じタグは無く<br>だけを改行したい場所に書きます。
リンク a タグ
他のサイトやページ内へのリンクはaタグを使います。
aタグについては別の記事で説明しています。
リスト ul / ol / liタグ
箇条書きやリストは次のタグで作成します。
olタグは順序ありリストを作成しますulタグは順序なしリストを作成しますliタグは各リストのリスト項目を作成します
リストの各タグの使い方は以下の記事で説明しています。
画像を表示する img タグ
WEBページに画像を表示するにはimgタグを使います。
src属性に画像のパスを設定する
表示する画像ファイルのURLやパスをsrc属性に設定します。
<!-- 画像ファイルのURLを指定する場合の例 -->
<img src="images/logo.png">
<!-- 画像ファイルのファイルパスを指定する場合の例 -->
<img src="images/logo.png">alt属性に画像の説明を設定する
画像がうまく読み込まれなかった時に、代わりに表示する文字をalt属性を設定します。
widthと height属性でサイズを指定する
CSSではなく、HTMLのimgタグのwidthと height属性でサイズを指定すると、HTML読み込み時に画像の大きさが確保されて、ページ読み込み時にレイアウトが大きく動くのを塞げます。
表を作成する table タグ
WEBページに表を作成するにはtableタブを使用します。
見出し h1〜h6タグ
見出しはh1からh6のタグで書きます。
数字が小さい方がより文字が大きい見出しです。
h1タグ
文字サイズが一番大きな見出しです。
ページのタイトル1箇所だけに使用するのが一般的です。
h2 〜 h6 タグ
h2〜h6のタグは、ページの構成に合わせて見出しをタグで囲みます。
ポチップ
WEBページの構造を作るタグ
WEBページの構造を表すタグには以下のタグがあります。
| タグ | 説明 |
|---|---|
| header | ページのヘッダー部分を囲みます。 |
| footer | ページのフッター部分を囲みます。 |
| nav | ナビゲーションメニューを囲みます。 |
| main | 主要なコンテンツを囲みます。 ページ内に一つのみです。 |
| article | ブログ記事のように単体で完結している内容を囲みます。 |
| aside | サイドバーなど、主要なコンテンツと直接関係しない内容を囲みます。 |
| section | ひとかたまりのコンテンツを囲みます。 |
| div | 要素をグループ化します。 |
ヘッダーには header タグを使う
ページのヘッダー部分はheaderタグで囲みます。
フッターには footer タグを使う
ページのフッター部分はfooterタグで囲みます。
主要なメニューには nav タグを使う
グローバルナビゲーションなど主要なメニューはnavタグで囲みます。
メインコンテンツは main タグで囲む
ページのメインの内容をmainタグで囲みます。
ブログ記事など個別の情報は article タグ
ブログ記事や店や料理ごとの情報など、それぞれが1個の完結した内容の場合articleタグで囲みます。
サイドバーなど関連情報は aside タグで囲む
メインのコンテンツと直接関係しない内容はasideタグで囲みます。
複数の要素が個別に関連情報を持つ場合、それぞれをasideタグで囲みます。
コンテンツの区分けごとに section タグで囲む
特別意味を持たないコンテンツの区切りはsectionタグで囲みます。
要素をグループ化するには div タグで囲む
CSSでスタイルを指定するためなどで、特定の範囲の要素をグループ化するにはdivタグを使います。
