HTMLタグを使用したホームページ制作でよく使われるマークアップタグの一例です。現在はhtmlなどのマークアップ言語を書かなくても、ウェブサイトが作成できる環境が揃ってきていますが、サイト制作の基礎となるHTMLやCSSからホームページの基礎となるのが下記のようなよく使われるタグになります。チャットGPTなどAIが自動生成可能な時代となり、今後は調整などで人間がサポートする部分になるのかもしれません。
この部分は人で例えると骨格や身体の部位となる大事なパーツです。家やマンションの基礎的骨組みとも言える、サイト枠組みを構成する要素は、ウェブサイト制作の基礎となり、ページ全体を支えます。
Info
主なカテゴリーに使う大枠の要素
スクロールできます
| カテゴリー | マークアップタグ | 意味 |
|---|---|---|
| section | <section></section> | サイトの１カテゴリーのまとまり |
| article | <article></article> | 関連性のない完結できる要素のまとまり |
| aside | <aside></aside> | 補足要素のまとまり |
| header | <header></header> | サイトのトップ部を示すまとまり |
| nav | <nav></nav> | サイトの要素を表す案内のまとまり |
| footer | <footer></footer> | サイトの下層部分に表示するまとまり |
| h1~h6 | <h2></h2> | サイトの記事見出し部分を示す表題文章 |
| main | <main></main> | サイトのメインコンテンツを示すまとまり |
要素やグループとして使うもの
スクロールできます
| カテゴリー | マークアップ | 意味 |
|---|---|---|
| div | <div></div> | 汎用性のある要素を指定するまとまり |
| dl | <dl></dl> | 説明リスト範囲を指定するまとまり |
| dt | <dt></dt> | 説明リスト範囲を指定する見出し |
| dd | <dd></dd> | 説明リスト範囲を指定する説明部分 |
| figure | <figure></figure> | キャプション表示付き画像 |
| figcaption | <figcaption></figcaption> | キャプション表示付き画像表題テキスト |
| hr | <hr></hr> | 区切り線 |
| blockquote | <blockquote></blockquote> | 引用セクション |
| ol | <ol></ol> | 数字有箇条書きリスト |
| ul | <ul></ul> | 箇条書き領域 |
| li | <li></li> | 箇条書きリスト |
| p | <p></p> | 段落 |
テキストの意味や装飾を示すもの
スクロールできます
| カテゴリー | マークアップ | 意味 |
|---|---|---|
| a | <a></a> | リンク |
| strong | <strong></strong> | 強調テキスト |
| time | <time></time> | 日時・時間 |
| p | <p></p> | 段落 |
| br | <br> | 改行 |
| bdi | <bdi></bdi> | 隔離テキスト |
| bdo | <bdo></bdo> | テキストの方向 |
| small | <small></small> | 短い範囲のテキストに使用 |
| sub | <sub></sub> | 下テキスト |
| sup | <sup></sup> | 上テキスト |
| mark | <mark></mark> | ハイライト |
| u | <u></u> | 下線 |
テーブルの要素
スクロールできます
| カテゴリー | マークアップ | 意味 |
|---|---|---|
| table | <table></table> | 表 |
| td | <td></td> | 表のセル |
| th | <th></th> | 表の見出しセル |
| tr | <tr></tr> | 表の行 |
| thead | <thead></thead> | 表ヘッダー |
| tfoot | <tfoot></tfoot> | 表フッター |
| tbody | <tbody></tbody> | 表本体 |
| col | <col></col> | 表列の設定 |
| caption | <caption></caption> | 表題 |
| colgroup | <colgroup></colgroup> | 表列のグループ化 |
フォーム要素
スクロールできます
| カテゴリー | マークアップ | 意味 |
|---|---|---|
| form | <form></form> | 入力フォーム |
| label | <label></label> | 入力トラべル関付け |
| input | <input></input> | 入力欄・選択 |
| button | <button></button> | ボタン |
| select | <select></select> | セレクトボックス |
| progress | <progress></progress> | 進捗状況 |
| textaera | <textarea></textarea> | 複数入力欄 |
| meter | <meter></meter> | 割合 |
埋め込みの要素
スクロールできます
| カテゴリー | マークアップ | 意味 |
|---|---|---|
| img | <img></img> | 画像 |
| iframe | <iframe></iframe> | インラインフレーム |
| embed | <embed></embed> | 画像や音声埋め込み |
| object | <object></object> | オブジェクト埋め込み |
| video | <video></video> | 動画再生 |
| audio | <audio></audio> | 音声を再生 |
| source | <source></source> | 動画音声のリソース再生候補 |
| map | <map></map> | イメージマップ |
| track | <track></track> | 動画・音声のテキスト・トラック |
| param | <param></param> | パラメータ |
末筆
WordPressのブロックエディタでも、ビジュアルエディタからコードエディタに切り替えると、各要素が組まれていることがわかります。現在はWebサイト制作の幅も広がり、サイトの各セクション要素やデザイン構成を、マークアップなしでも作業できますが、その基礎を支えるのはHTMLであり、マークアップにより、意味を付けていくことでホームページの骨組みが構築されていきます。
| ©︎ | © | コピーライト |
| ®︎ | ® | 登録商標 |
| TM | ™ | TMMARK |
| ♠︎ | ♠ | スペードなど色々あります |