HTMLの記述では閉じるものと閉じないものがあります。
一つ一つは単純でも、数がそろうと覚え
aタグ(エータグ)
aはanchorの略なので、アンカータグのことです。
短いので、そのままエータグと言われています。
aタグは、hrefを使ってURLのリンク先を設定できます。
<a href="ak-up.com">本ページのトップ画面</a>
なお、hrefはhyperline referenceの意味です。
読み方は、エイチレフです。
img(イメージ)・src属性(ソース属性)
画像のリンクを示す際に使うタグです。
srcはsourceの略で、ソースです。
src属性で画像を指定して読み込みます。
以下のように、イメージの指定先を記載します。
閉じタグなどは不要です。
<img src="https://www.ak-up.com/wp-content/uploads/2019/05/icon_19-05-18.png">
hrタグ(エイチアールタグ)
horizontal rule(ホリゾンタル ルール)で、水平の罫線のことです。
こちらも線をひくだけなので、閉じタグなどは必要ないです。
ですよね。
さまざまなとっかかりをつけるために、今回は、閉じるか閉じないかの観点で整理してみます。
また、合わせて、記述の読み方も併記しておきます。
*裏側設計図のつながりで、ひらパー兄さんの設計図
閉じるもの
titleタグ(タイトルタグ)
タイトルは、検索エンジンの結果に出たり、ページ表示のタイトルにも出てきます。
とても大切なところで、<head>の間に配置します。
<head> <title>ここにタイトルが入ります</title> </head>
body(ボディ)
本文部分です。読んでももらうためのメインのコンテンツを記載します。
当然ながら閉じます。HTML5からの記述です。
<body> ... </body>
headerタグ(ヘッダータグ)・footerタグ(フッター)
すでにtitleタグで説明をしている部分です。
ここの閉じます。
<head> <title>ここにタイトルが入ります</title> </head>
footerの場合も同様です。
articleタグ(アーティクルタグ)
ウェブコンテンツにおいて、記事ひとつのまとまりである場合に、使うのがarticleタグです。
articleタグも、開始タグ・終了タグのセットで使います。
sectionタグ(セクションタグ)
記事ほどのまとまりではなく、そのうち下の章立てなど、もう一段小さなまとまりにおいて、セクションタグを使います。
セクションタグも、開始タグ・終了タグのセットです。
navタグ(ナビゲーションタグ)
ナビゲーションメニューをくくるタグです。
こちらの場所ですね。
開始タグと終了タグのセットでくくります。
asideタグ(アサイドタグ)
asideタグも開始タグと終了タグのセットで使います。
こちらがサイドメニューの例です。
divタグ(ディブタグ)
HTML5以前からある、ひとまとまりを示すタグですね。
内容が存在するため、開始タグと終了タグが必要です。
h1〜h6(エイチワン〜)
h1はエイチワンと呼ばれますが、hはヘディングの略です。
代表的なものですが、これも開始タグと終了タグのセットです。
pタグ(ピータグ)
pタグも開始タグと終了タグのセットです。
pはパラグラフの略です。
さりとて、正式にパラグラフと略さずに読んでいるのは見かけません。
spanタグ(スパンタグ)
pタグ内で、文字の色や太さなど書式を変えたいときに、その一部をくくるために使います。
なので、開始タグと終了タグがセットです。
smallタグ(スモールタグ)
pタグ内で、注釈を載せるなど、ちょっと文字サイズを小さくしたいときに使います。
ですから、開始タグと終了タグのセットで使用します。
閉じないもの
meta要素(メタ要素)・link要素(リンク要素)
HTML5の最初に記載するものです。
charasetは、UTF-8のように、文字コードの指定をします。
meta nameは、検索エンジンにサイトの内容を伝えるためのタグです。
また、linkでスタイルシートへのリンクを外部ファイルの参照させることをその続きで行うことが多いです。
<head> <meta charset="UTF-8"> <title>さっき説明されたタイトルの例</title> <meta name="description" content="検索結果に表示される"> <link rel="stylesheet" href="https://ak-up.com/style.css"> </head>
brタグ(ブレイクタグ)
brタグは、breakタグのことです。
話で出てくるときは、ビーアールタグと呼ばれている感じがします。
改行を行うだけなので、開始・終了を指示する必要がないです。
ひとつおけば、改行一回です。
aタグ(エータグ)
aはanchorの略なので、アンカータグのことです。
短いので、そのままエータグと言われています。
aタグは、hrefを使ってURLのリンク先を設定できます。
<a href="ak-up.com">本ページのトップ画面</a>
なお、hrefはhyperline referenceの意味です。
読み方は、エイチレフです。
img(イメージ)・src属性(ソース属性)
画像のリンクを示す際に使うタグです。
srcはsourceの略で、ソースです。
src属性で画像を指定して読み込みます。
以下のように、イメージの指定先を記載します。
閉じタグなどは不要です。
<img src="https://www.ak-up.com/wp-content/uploads/2019/05/icon_19-05-18.png">
hrタグ(エイチアールタグ)
horizontal rule(ホリゾンタル ルール)で、水平の罫線のことです。
こちらも線をひくだけなので、閉じタグなどは必要ないです。
まとめとして
タグの種類や内容はまだまだたくさんあります。
覚えきれないなと感じるかもしれませんが、慣れてくると意識することなく使えます。
開始タグ・終了タグのあるなしで分類すると意識せずに使って理解する助けになるはずです。
整理の仕方のひとつとして使ってみてください。
【編集後記】
虫捕りしていると、かごのなかでトンボがコオロギを食べていました。
そういうこともあるんですね。
残酷な感じもしますが、子どもにもちゃんと見せて一緒に観察しました。
【運動記録】
ストレッチ○ 筋トレ○
【子育て日記(4歳・0歳)】
虫取りに行きました。
いったん捕り終わって休憩。
しばらくすると、
「にがしてくる！」と。
今日は満足したんだなぁと考えていたら、
「むしとってくる！」と。
「えっ、なんでさっきの逃したの？」と聞くと。
「とるのおもしろいから」だそうです。