HTML要素のうち、<body>内に入る代表的なものについて紹介します。
以下に紹介するものの組合せでHTML文書を作っていくことになります！
結構ボリュームが多いので、記事を二回に分けて紹介します。
見出し <h1>〜<h6>
見出しを表す要素は、h1〜h6まで6段階の見出しがあります。h1が大きいレベルの見出しで、h6にかけて小さい見出しとなります。
使い分け方としては、文章をいくつかのセクションに分けて、セクションごとに見出しを付けます。さらにそのセクション内で小さなセクションを作る際に1つ小さいレベルの見出しをつけます。
次の点にも注意しましょう
h1はページ内で1つのみ使用する(ページのタイトル等のように使用する)- 見出しのレベルを飛ばして使用しない(
h1の次にh3を使用したりしない)
<h1>タイトル</h1>
<h2>セクションA</h2>
<p>...</p>
<h2>セクションB</h2>
<p>...</p>
<h2>セクションC</h2>
<h3>セクションC-a</h3>
<p>...</p>
<h3>セクションC-b</h3>
<h4>セクションC-a-1</h4>
<p>...</p>
<h3>セクションC-c</h3>
<p>...</p>
<h2>セクションD</h2>
<p>...</p>段落 <p>
段落を表す要素は、主にテキストをマークアップする為に使用します。その他にも画像や、フォーム等を子要素にまとめる使い方もあります。
<p>これは段落です</p>リスト <ol><ul><li>
リストを表す要素は下記の要素を組合せて構成されます。
<ol>: 順序付きリスト。項目の行先頭に数字の連番などのリストマーカーがつく。子要素にliを入れていく。<ul>: 順序無しリスト。項目の行先頭に文字などの固定のリストマーカーがつく。子要素にliを入れていく。<li>: リストの項目。
順序無しリスト
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>順序付きリスト
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>リンク <a>
任意のURLや同一ページ内でのリンクを作成します。
URL指定でリンクしたい場合はhref属性にリンク先URLを指定します。
ページ内リンクをしたい場合は、リンク先としたい特定の要素にid属性に任意のIDを指定し、<a>要素のhref属性に#[リンク先要素に指定したid]を指定します。
<a href="https://www.google.com/">googleへ</a>
<a href="#hoge">hogeへジャンプ！</a>
...
<h2 id="hoge">"hogeへジャンプ！"をクリックするとここへ飛びます</h2>
また、target属性を_blankと指定すると、リンク先を開く際に新しいウィンドウで開くようになります。
<a
href="https://www.google.com/"
target="_blank"
>
googleを新しいウィンドウで開く
</a>画像 <img>
画像を表示する要素です。閉じタグはありません。
src属性に任意のパス、又はURLを指定して画像を表示します。
alt属性には画像がなんらかの理由で表示されなかった時に代替で表示される文字を指定します。
<img src="./image.png" alt="イメージ画像">width、height属性で画像を表示する大きさを指定しておくと、画像がダウンロードされる前に表示する大きさ分の領域を確保してくれるので、ダウンロードが終わってからほかの要素の表示がズレたりしないのでオススメです。
また、表示する画像は文脈的に必須の画像なら<p>で囲い、挿絵的に使いたければ<figure>で囲い(<figcaption>も必要に応じてつける)、それ以外のデザイン的に使うなら<picture>や<div>で囲います。
また、背景画像として使うのであればcssのbackground-imageで行うのがいいようです。
テーブル
テーブル(表)は下記の複数の要素の組合せで構成します。
結構めんどくさい…(難しい場合は"テーブルタグジェネレーター"とかでググれば幸せになれるかも)
<table>: 表全体を表す。下記を子要素とする。<thead>: 表の列の見出しを表す。子要素としてtr,thで見出し行を追加する。見出しをつけないなら省略可能。<tbody>: 表の本体。子要素としてtr,th,tdで行を追加する。省略してそのまま行を書き始めてもOK。(ブラウザ- 側で推測して勝手に付け加えてくれる)。<tr>: 表の行を作成。子要素としてth,tdを入れる。<th>: 表の見出しとなるセルを作成する。<td>: 表のデータとなるセルを作成する。
次のようなコードになります
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>リンゴ</td>
<td>100円</td>
</tr>
<tr>
<td>ミカン</td>
<td>110円</td>
</tr>
<tr>
<td>バナナ</td>
<td>120円</td>
</tr>
</tbody>
</table>上記のコードはブラウザで見ると、以下のような表になります。環境により見た目は異なります。。
| 商品名 | 価格 |
|---|---|
| リンゴ | 100円 |
| ミカン | 110円 |
| バナナ | 120円 |
改行 <br>
HTML上の<p>要素内等にて改行をしても、ブラウザで見た時にはコンテンツ幅いっぱいにまで文書が広がります。任意の場所で改行を行いたいときは<br>を挿入します。
<p>
この段落は、ブラウザで見た時、
改行が入りません。
</p>
<p>
この段落はブラウザで見ると<br>
改行が入ります。
</p><div>
上記の使い方に当てはまらず、特に意味を持たないブロック要素。
スタイルを指定する目的で、任意の要素を囲むコンテナのように使うことが多い。
<body>
<div class="bory_wrap">
<!-- コンテンツ -->
</div>
</body><span>
上記の使い方に当てはまらず、特に意味を持たないインライン要素。
スタイルを指定する目的で、任意のブロック要素内に入れ、行内コンテナとして使うことが多い。
<p>
span要素を使用しているところは<span>こちら</span>です。
</p>セマンティックな要素
HTML5という規格から、従来より意味や目的を持たせる為に追加された要素がいくつかあり、これらを正しく使う事で、検索エンジンの最適化(SEO)や、スクリーンリーダー等のツールでの解析がしやすいアクセシビリティの高いコンテンツとなる。
代表的な要素は次の通り。
<header>: ページのヘッダーを表す。主に<h1>や<nav>を入れる。<article>や<section>内のヘッダーへ挿入することもできる。<nav>: WEBサイト上の他のページやページ内へのナビゲーションリンクを表す。<main>: ページのメインコンテンツを表す。ページで一回だけ使うようにする。<section>: コンテンツの区分を表す。子要素にはなるべく見出し要素<h1>～<h6>を置く事。<article>内のコンテンツの区分にも使える。<article>: ブログの記事部分のような、単独して成立するコンテンツを表す。<section>内での独立したコンテンツにも使える。<aside>: 著者情報や、関連リンク等の、メインのコンテンツに直接関連しないものを表す。<footer>: ページのフッターを表す。
これらのタグの使用例は以下のようになります。
<header>
<h1>h1の内容</h1>
<nav>
<ul>
<li><a>ナビ1</a></li>
<li><a>ナビ2</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>h2の内容</h2>
<time datetime="2011-08-20">2011年8月20日</time>
</header>
<h3>h3の内容</h3>
<p>文章hoge</p>
<section>
<h4>h4の内容</h4>
<p>文章fuga</p>
</section>
</article>
<aside>
<img src="hoge.png" alt="広告A">
</aside>
</main>
<footer>
<p><small>Copyright</small></p>
</footer>この形がページ全体のフォーマットになります。
次の記事
formについて紹介します！
