HTMLタグ一覧23/11/09
この記事ではHTMLのタグについて、著者が見つけた、知った、理解した順に書いていくのであしからず。できるだけ間違いを載せないように努めるけど、学習しながらだから間違いがあると思って読んでくれると嬉しいよ。
余裕ができたら順番も変えていこうと思うよ。
<html></html>
こいつはこの中に書かれてるものはHTMLで書かれてるよって機械側に教えるためのもの。こいつがないとWebで見ることができない…かも。
<head></head>
こいつはページ全体の情報を載せるやつ。ユーザーには見えない部分。検索結果にヒットさせるために必要な情報だったり、外部ファイルの読み込みを行ったりする場所。
<body></body>
ここにブラウザ上で表示されることを書いていく。
<p>...</p>
こいつはHTMLで文字を書き出すうえで必須かも。ひと段落分を「...」に書き込むことで表示可能。
<br>
こいつは改行する役割を持つ。上の段落の中に入れれば話のまとまり(かたまり？)が作れるからあとで編集しやすくなりそう。
<a href="設定したいURL">クリックする文字列</a>
こいつは文字列にURLを対応させる神タグ。…難しそうだけど考え方は単純。hrefっていう「属性」があるらしくて、C言語のint,doubleっていう型と変数が一緒になってる感じかな？変数も一緒っていうと語弊がありそうだけど、とりあえずhrefにURLぶちこめば何とかなりそう。
<h1>...</h1>、<h2>...</h2>、<h3>...</h3>
こいつは見出しの文字の大きさを順に変えてくれるやつ。<h1>が一番大きくて順に小さくなっていく感じ。
<ul></ul>
こいつは順序のないリスト表示をするための外枠。<li>ってやつと組み合わせて使う(2個下に書くね)。順序のないってどういうことってなる人は、
・アマクサクラゲ
みたいなのを想像してね
<ol></ol>
こいつは順序のあるリスト表示をするための外枠。<li>ってやつと組み合わせて使う(下に書くね)。順序があるってどういうこと？？
1.ごはんをよそう
2.卵をご飯の上にわりおとす
3.卵ご飯完成
こういうこと。
<li>...</li>
こいつは上の<ul>,<ol>の中で複数使うやつで、「...」に文字列を入れればこれの個数分リストが作れる感じ。
<img src="plane.jpg" alt="飛行機の写真" />
こいつは画像を表示するときに使うやつ。<a>タグのところでも言った「属性」が2つ出てきちゃったよ。src属性は画像のファイル名を入れるやつで、alt属性は画像が表示されなかったときに代わりに出てくる文字列を入れるやつ。だから、altのほうは必須ではないよ～。ちなみに飛行機は例だから、自分の表示したいやつに置き換えてね。
<table></table>
こいつは表を作るときに使う外枠。中に<tr>,<th>,<td>を使うよ。
<tr></tr>
こいつは表を作るときの中枠。行としての役割があって、中に<th>,<td>を使うよ。
<th>...</th>
こいつは表を作るときに使うやつで、表の中の見出しのセルとして使われる。「...」に見出しの文字列が入るよ。
<td>...</td>
こいつは表を作るときに使うやつで、表の中のデータのセルとして使われる。「...」にデータの文字列が入るよ。
<header></header>
こいつは<head>とは違って、<body>の中のヘッダー部分を構造化できるやつ。
<nav></nav>
こいつさまはサイトのメニュー部分を作ってくれるやつ！見やすい、使いやすいを求めるなら避けては通れないタグですね。中に<ul>,<li>,<a>を使ってメニュー化できるよ。
<section></section>
こいつは第何章とか第何節なんかを構成するやつ。これを使って章、節部分を作っておけばCSS使って整えるときに楽できるって感じかな？<h1>～<h6>の見出しが中に入ってないとだめだから気を付けてね。
<article></article>
こいつは記事部分！ってわかりやすくするやつ。上と似たような感じ。てか一緒じゃね？こいつも<h1>～<h6>の見出しが中に入ってないとだめだから気を付けてね。
<div></div>
こいつに意味はない！でも意味はある！何を言ってるかわからねぇと思うが…俺も何を学んだかわからなかった…って冗談はさておき、まとまりとして分けたいときに使う。
CSSで扱いやすくするためのものだね。みんなも片づけるときは棚とかタンス、引き出しに入れるよね。たぶんそれ。
あと、下で話す<span>と対照的に、中にある要素を下に置いていくよ。<p>みたいなもんだね。
<span></span>
こいつは上で言ってる<div>のようなもの。違う点としては、中にある要素が横につながっていくってこと。
<main></main>
こいつにページ内で一番伝えたいことを入れるといい感じ。<article>,<div>,<span>を中で使って区分けすると整理しやすいね。
<aside></aside>
こいつはサイトのサイドバー部分を構造化するのに役立つよ。
<footer></footer>
こいつはサイトの一番下の部分を構造化できるやつ。
