はじめに
毎日Qiita投稿5日目です。
今回は初学者が最低限覚えておくべき、本当に初歩の初歩の初歩的なHTMLタグをまとめていきます。
基本構造、head内
タグ |
使用用途 |
html |
HTML文書であることを表す。 |
head |
基本的にHTMLのヘッダ部分に記載。中の記述はブラウザには表示されない。この中にページのタイトルやcssファイルリンクなどを記載。 |
meta |
言語や説明文などのページ情報を記載。初学の頃は主にUTF-8のを記述するイメージ。 |
title |
ページのタイトルブラウザーのタブにここの記載が表示される。 |
link |
参照する外部ファイル主にcssファイルを読み込む。 |
body |
HTMLのコンテンツ部分。この中の記述がブラウザーに表示される。 |
コンテンツ内
タグ |
使用用途 |
h1〜h6 |
見出し。基本的には数字順位記述していく。 |
p |
段落。 |
img |
画像。srcで画像取得。 |
a |
リンク。hrefでリンク取得 。 |
ul |
箇条書きリスト。 |
ol |
番号付き箇条書きリスト。 |
li |
リストの各項目。 |
br |
改行。 |
strong |
重要な要素。太字で表示される。 |
small |
著作権や法的表記。 |
span |
インライン要素。CSSで一部表示を変えたいときなどに使用。 |
script |
javascriptを記述する際に使用する。 |
表(テーブル)
タグ |
使用用途 |
table |
表(テーブル)全体。 |
tr |
表の1行。 |
th |
表の見出しとなるセルを作成。 |
td |
表のデータとなるセルを作成。 |
フォーム
タグ |
使用用途 |
form |
フォームを作成する。 |
<input type="text"> |
1行テキスト入力欄。 |
<input type="radio"> |
選択項目のうち1つだけ選択可能なラジオボタン |
<input type="checkbox"> |
複数選択可能なチェックボックス。 |
<input type="submit"> |
送信ボタン。 |
select |
セレクトボックス。 |
textarea |
複数行入力可能なテキスト入力欄。 |
label |
ファームのラベル。フォームの項目と名前を関連付ける事ができる。 |
ブロック要素
タグ |
使用用途 |
header |
ページ上部の要素。 |
nav |
メインのナビゲーション。 |
article |
ページの記事部分。 |
section |
意味や機能のひとまとまり。 |
main |
ページのメインコンテンツ。 |
aside |
補足情報や、メインコンテンツとは関連性が低い部分。 |
footer |
ページ下部の要素。©やSNSリンクなど。 |
div |
ブロック要素。 |
終わりに
今回はHTMLの基本的なタグをまとめてみました!
初学者の方がこれを全て一気に覚えるのは大変です。暗記教科のよう覚える必要はなく、コード書いてたら覚えていった。使いながら覚えていくという形が一番の近道かなと思います!
だからコードに触れる時間は多く取りたいですね。
※プログラミングを始めてまだ月日も浅い初学者が投稿しています。誤字脱字等ありましたら申し訳ないです。何か間違いがあればご指摘いただけると助かります。