ウェブサイトコーディングでよく登場するHTMLタグのまとめ
ウェブサイトをHTMLコーディングによって構築する場合に必須となるのがHTMLタグですね。種類もたくさんあるので全て覚えるのもなかなか大変です。そこで今回はウェブサイトのコーディングで、よく登場するタグにスポットをあててまとめてみました。
これから紹介するHTMLタグですが、現在主流であるHTML5の内容で紹介していきます。HTMLの基本的な知識についてはまた改めて紹介したいと思います。
もちろんこれ以外にもタグは存在しますが、上記のタグを覚えておけば十分ウェブサイトを作ることができます。
それぞれのタグの意味をしっかりと理解した上で正しい文章構造になるようコーディングをしていきましょう。
1. ベース
| <!DOCTYPE html> | DOCTYPE宣言のタグです。HTML文書の先頭に記述します。 |
|---|---|
| <html> | HTML文書であることを示すタグです。ルート要素になり、DOCTYPE宣言のすぐ後に記述します。 |
| <head> | HTML文書のメタ情報を示します。 |
| <title> | HTML文書のタイトルを示します。 |
| <link> | 別の文書と関連づける役割をします。 |
| <style> | スタイルシートを記述します。 |
| <meta> | 各メタ情報を示します。 |
| <script> | スクリプトを読み込みます。 |
| <body> | 文章の内容を示します。 |
2. セクション・見出し
| <header> | ヘッダー部分を示します。 |
|---|---|
| <footer> | フッター部分を示します。 |
| <nav> | ナビゲーション部分を示します。 |
| <section> | 汎用的なセクション部分を示します。 |
| <article> | ブログ記事など独立した内容を示します。 |
| <aside> | サイドバーやバナーエリアなど補足情報の部分を示します。 |
| <main> | メインコンテンツであることを示します。 |
| <address> | 住所情報であることを示します。 |
| <h1> 〜 <h6> | 見出しを示します。1〜6の順番で大見出しから小見出しと変わります |
3.コンテンツ
| <p> | 段落を示します。 |
|---|---|
| <hr> | 文章の区切りを示します。また水平線が入ります。 |
| <span> | 特定の範囲をグループ化します。（インライン要素） |
| <div> | 特定の範囲をグループ化します。（ブロック要素） |
| <ul> | 順不同リストを示します。 |
| <ol> | 順序つきリストを示します。 |
| <li> | リストの項目を示します。 |
| <dl> | 定義リストを示します。 |
| <dt> | 定義される言葉を示します。 |
| <dd> | 定義される言葉の説明を示します。 |
4.テキスト関連
| <a> | リンク・アンカーを示します。 |
|---|---|
| <strong> | 文章・単語の重要性を示します。 |
| <sub> | 下付き文字を示します。下端揃いの小文字で表示されます。 |
| <sup> | 上付き文字を示します。上端揃いの小文字で表示されます。 |
| <ruby> | ルビ（ふりがな）を示します。文字の上部に表示されます。 |
| <del> | 削除された文章を示します。重なるように取り消し線が引かれます。 |
| <br> | 改行を示します。 |
5.埋め込み・表示
| <img> | 画像イメージファイルを表示します。 |
|---|---|
| <iframe> | インラインフレームを埋め込みます。 |
| <object> | 様々なファイル形式のコンテンツデータを埋め込みます。 |
| <embed> | 外部プラグインデータを呼び出して埋め込みます。 |
| <video> | 動画ファイルを表示し再生します。 |
| <audio> | 音声ファイルを再生します。 |
| <canvas> | グラフィック領域を表示します。（グラフィックの内容はjavascriptで示します） |
| <map> | イメージマップを表示します。 |
| <area> | イメージマップの領域を指定します。 |
6.テーブル・フォーム
| <table> | 表組み（テーブル）を作成します。 |
|---|---|
| <tr> | 表の行を示します。 |
| <th> | セルのヘッダ部分を示します。 |
| <td> | セルの内容部分を示します。 |
| <thead><tbody><tfoot> | 表の行をグループ化します。（ヘッダ部分・ボディ部分・フッター部分の定義） |
| <col> | 表の列を示します。 |
| <colgroup> | 表の列をグループ化します。 |
| <form> | 入力フォームを作成します。 |
| <label> | フォーム部品と紐付いたラベル部分を示します。 |
| <input> | テキスト入力欄や選択肢、チェックボックス、送信ボタンなどのフォームに使用する部品を作成します。 |
| <select> | 選択形式のセレクトメニューを作成します。 |
| <option> | セレクトメニュー内の選択肢を示します。 |
| <textarea> | 複数行のテキスト入力欄を作成します。 |
| <button> | 各種ボタンを作成します。 |
