フロントエンドエンジアへの超入門の第３回です！
タグに関する基礎知識を知ったところで、「実際にどんなタグがあるんだ？」「どんな時に使うんだ？」
そんな疑問が湧いてきたはず。
今回はHTMLでよく使われるタグと基本構成を見ていこう。
そもそもタグは文書構造を定義するもの！
まず大前提として、タグはデザインを成形するものではありません。
太文字にしたり、テキストが斜体になるようなタグが存在しますが、あくまでそのテキストがどういう意味なのかを定義するものです。
HTMLでを書く上で最も重要なのは見た目ではなく文書構造なのであります。
例えば <strong>タグ。これはたしかに太字になりますが、文章のなかで強い重要性を持つワードを定義するものです。
なので、「ここはデザイン的に太字にしたいな」みたいな場合、太字だからstrongを使おうではなく、本当にstrongタグで囲うべき重要なワードなのかを考えましょう。
と言われると、タグを使ってマークアップする際にどうすればいいかわからなくなってしまので、最初のうちは色々なwebサイトをのコードを見たりして、実際にどんなタグが使われているのか確認するのがいいでしょう。
デザインを作るにはどうしたらいいのか？
デザインレイアウトはスタイルシート（CSS）というものを使います。CSSについては第２章で紹介するので、しばしお待ちを。
章や段落と設ける h1,h2,h3…. p
文書を章や段落で構成させるには、次のような記述をします。
前回までに使っていたsample.htmlの<body>タグの中に次のコードを書いてみよう。
<h1>フロントエンド入門 第１章</h1>
<p>「フロントエンド」とはwebサイトのシステムのなかでユーザーに対して最も前面にある環境のこと。....</p>
<h2>まずはHTMLを表示してみよう</h2>
<p>HTMLとは.....</p>
<h2>HTMLタグにかんする基礎知識</h2>
<p>HTMLタグの種類や実際にどう言った.....</p>
ブラウザで確認してみよう。
<h1>,<h2>…は見出しです。文書を作るには見出しをしっかり定義します。 そして見出しに対するテキストは<p>です。 段落ごとに<p>タグを使って文書を作っていきます。
改行 br
テキストを開業するには<br>タグを使います。
<p>こうやって改行するんだよ<br>ほらね改行できた。</p>
リストを作る ul ol li dl
<ul>タグは箇条書きリスト
<ol>タグは順番付き箇条書きリスト
<li>タグはul,olタグの中で使われるリストの内容
<dl>タグは定義リスト その中にdt,ddタグをつかう
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ol>
<li>番号付きリスト</li>
<li>番号付きリスト</li>
<li>番号付きリスト</li>
</ol>
<p>定義リスト</p>
<dl>
<dt>用語1</dt>
<dd>用語1の説明</dd>
<dt>用2</dt>
<dd>用語2の説明</dd>
<dt>用語3</dt>
<dd>用語3の説明</dd>
</dl>
リンク a
今表示してるページから他のページに飛ばしたいときは<a>タグを使います。 <a href="rinkusakino-url">リンクぼたんだよ</a>
ヘッダー、フッター
<header> ヘッダー
webページにの一番上にある、ロゴやナビゲーションを表示しているようなパーツに使用。
<footer> フッター
webページにの一番下にある、コピーライトなどを表示しているパーツに使用。
その他よく使われるタグ
<div>
文書的な意味は持たないがデザインレイアウト的に囲うために使う。ブロック要素。
<span>
文書的な意味は持たないがデザイン装飾のために使う。インライン要素。
<nav>
サイトのナビゲーションを定義
<main>
ページのメインコンテンツを定義。
<section>
文書やまとまりになるものに使用。
<article>
記事など独立したコンテンツを定義。ブログや読み物系の記事でよく使われる。
<aside>
ページの本筋とは切り離された要素にしよう。ちょっと難しいのでわからない場合無理して使わなくてよし。
HTML構成サンプルを見てみよう
上記で主要タグを見てきましたが、実際のwebページにどのような構成で書かれるのかサンプルを見てみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基本テクニックとよく使うタグ サンプルwebページ</title>
</head>
<body>
<!-- ヘッダー -->
<header>
<p>サイトのロゴ</p>
<nav>
<ul>
<li><a href="xxx">リンク1</a></li>
<li><a href="xxx">リンク2</a></li>
<li><a href="xxx">リンク3</a></li>
<li><a href="xxx">リンク4</a></li>
</ul>
</nav>
</header>
<!-- メインコンテンツ -->
<main>
<h1>サイトタイトルやキャッチコピー</h1>
<section>
<h2>セクションタイトル1</h2>
<p>テキストが入りますテキストが入りますテキストが入ります</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ol>
<li>番号付きリスト</li>
<li>番号付きリスト</li>
<li>番号付きリスト</li>
</ol>
<p>定義リスト</p>
<dl>
<dt>用語</dt>
<dd>用語の説明</dd>
<dt>用語</dt>
<dd>用語の説明</dd>
<dt>用語</dt>
<dd>用語の説明</dd>
</dl>
</section>
<section>
<h2>セクションタイトル2</h2>
<p>テキストが入りますテキストが入りますテキストが入ります</p>
</section>
<article>
<h3>記事タイトル</h3>
<p>記事のテキスト記事のテキスト記事のテキスト<br>記事のテキスト記事のテキスト</p>
<p>記事のテキスト記事のテキスト記事のテキスト<br>記事のテキスト記事のテキスト</p>
<p>記事のテキスト記事のテキスト記事のテキスト<br>記事のテキスト記事のテキスト</p>
<p>記事のテキスト記事のテキスト記事のテキスト<br>記事のテキスト記事のテキスト</p>
</article>
</main>
<!-- サイドバー -->
<aside>
<div><a href="xxx">バナーボタン1</a></div>
<div><a href="xxx">バナーボタン2</a></div>
<div><a href="xxx">バナーボタン3</a></div>
</aside>
<!-- フッター -->
<footer>
<p>©bendteq.com</p>
</footer>
</body>
</html>
実際にブラウザに表示されるものは気にせず、とりあえずHTML構造を確認してください。
webページではこんな感じにHTMLを書いくので、参考例としてみてもらえればOK!
第1章 Webページ作成入門の記事一覧
- とにかくwebページ HTMLを作ってみよう！
- HTMLタグに関する実装基礎知識
- HTMLの基本テクニックとよく使うタグ今ココ
- 画像を表示しよう