2020年1月7日こんにちは、Kosei(https://twitter.com/pompom_stk)です。このブログは、HTMLについて初心者向けに解説しています。その中で、「タグ」や「要素」などといった用語がよくでてきます。これらはHTMLを説明する上で必須の用語です。HTMLをこれから始めようという人にとっては、タグや要素についてよく知らないと思います。これらの違いについて理解した上でHTMLを勉強していかないと、後々よくわからなくなってしまいます。この記事ではHTMLにおいて使用するタグや要素、属性について解説していきます。この記事の要点まとめHTMLってなに?HTMLはWebサイトを構成する上で欠かせないマークアップ言語。開始タグと終了タグの間に入る内容に対して意味を持たせるもの。2.開始タグ「ここからこの要素で始める」という意味を持ち、中には要素や属性、属性値が入る。3.終了タグ開始タグの要素名の前に/を書いたもので、「ここでこのタグは終わる」という意味を持つ。属性は要素名に対して詳細な意味付けをすることができる。属性値は属性に対してさらに詳細な意味付けをすることができる。内容は、開始タグと終了タグで挟まれた部分のことを指す。HTMLの基本は<開始タグ>内容</終了タグ>HTMLの基本書式は『<開始タグ>内容</終了タグ>』だが、全てがこれにあてはまるわけではない。language(ハイパーテキストマークアップランゲージ)」の略称で、Webサイトを作成するうえで欠かせない言語です。text」は文書間をリンクするハイパーリンク、「Markup」は文書が段落なのか見出しなのかなど各部分の働きに対して目印をつけるものです。textとMarkupを組み合わせたLanguage(言語)が、「HTML」と呼ばれます。現在インターネット上で公開されているWebページのほとんどは、この「HTML」で構成されたものです。このブログもHTMLで構成されています。ちなみに「HTMLはプログラミング言語だ」と思っている人もいますが、厳密にはプログラミング言語ではありません。HTMLは「タグによって文書の情報を出力する言語」で、マークアップ言語と呼ばれます。Web系のプログラミングをする上でHTMLは必須ですので、このブログのカテゴリーなどではHTMLをプログラミング言語として扱っています。HTMLの基本構造などについて詳しく知りたい方は[初心者向けHTMLの基本構造]の記事をご覧ください。HTMLの基本的な書式HTMLでは『<p>』のように、不等号(<,>)で囲んだものを「タグ」と呼びます。タグには開始タグと終了タグがあり、それら全体を「要素」と呼びます。開始タグの中には要素名の他、属性や属性値といったものが入ることもあります。これらについて詳しくみていきましょう。この記事では以下のコードを例に解説していきます。このコードについては[a要素を使ってリンクをつなげる/HTMLの基本]の記事を参考にしてください。CodePen.—参考画像—ここからはこちらの画像を参考に読んでください。要素名は、開始タグと終了タグの間に入る内容に対して意味を持たせるものです。今回の例で使用している要素名は『a』で、内容に対してリンクを張ることのできるものです。開始タグから終了タグまでのコード全体を「要素」と呼びます。今回の例の場合は、「a要素」と呼びます。タグ内に要素名を記入するには、大文字でも小文字でも可能です。2.開始タグ要素名を不等号(<,>)で囲んだものを「開始タグ」と呼びます。「ここからこの要素で始めますよ」という意味を持ちます。今回例に挙げたa要素では、開始タグ内に属性や属性値が入っています。(属性・属性値については後ほど説明します)ですが、「<p>」のように、開始タグ内に要素名を入れるだけで使える要素もあります。p要素は属性名を指定しなくてもいいですが、指定することもできます。a要素は開始タグ内に属性を入れないと使用できません。このようなタグは他にもあるので、使う際は注意しましょう。3.終了タグ終了タグは、開始タグの要素名の前にバックスラッシュ(/)を入れたもので(これは書き方だけの話で、開始タグとは全く別物です)、「</a>」のようの書きます。「開始タグからここまでで、この要素は終わりますよ」という意味を持ちます。画像を表示させるimg要素のように、終了タグを持たない要素(空要素)もあります。空要素は『<要素名>』のように書くか、『<要素名/>』のように不等号の閉じ括弧前にバックスラッシュを付けて書くことができます。このブログでは、前者の『<要素名>』のように記述しています。属性は要素名に対して詳細な意味付けをすることができます。属性は一つの要素に対して複数指定することが可能で、記述の際は属性名の前に半角スペースで区切って書きます。要素によって使用できる属性は異なりますので注意しましょう。今回の例では、「href」と「target」が属性に当たります。それぞれの役割として、hrefはリンク先のURLを指定、targetはリンク先ファイルを表示するために使用するウィンドウの指定をすることができます。属性も大文字・小文字どちらでも記述すること可能ですが、このブログでは小文字で記述していきます。属性値は、それぞれの属性に対してさらに詳細な意味付けをすることができます。『属性="属性値"』のように記述します。属性の後に=を付け、その後にダブルクオーテーション(”)で属性値を囲んで指定しましょう。今回の例では、hrefに対する属性値は「https://pompom-stk.com/(このブログのURL)」、targetに対する属性値は「blank」です。URLはリンク先のURLを指しており、blankは新規のウィンドウでファイルを開くことを指しています。hrefやtarget、blankについてこの記事では深く解説しませんので、これらについて知りたい方は[a要素を使ってリンクをつなげる/HTMLの基本]の記事を参考にしてください。「a(リンク先)をtarget(表示するためのウィンドウ)はblank(新規のウィンドウ)です」となります。属性="属性値"」は「(要素名)の(属性)は(属性値)」のように考えてください。属性値も大文字・小文字でちらでも記述することが可能です。内容は開始タグと終了タグで囲まれた部分のことを指します。今回の例でいくと「SplaTech」というテキストが内容です。a要素はリンク先の指定を行う要素で、その内容であるSplaTechというテキストをクリック(タップ)すると、指定したリンク先を新規ウィンドウで開くことができます。href属性は省略してしまうとURLを指定できないため、正常にリンクの設定ができません。target属性は省略することが可能です。target属性を指定しなかった場合、指定したリンク先は新規ウィンドウではなく、現在使ってあるウィンドウで開かれます。これについて詳しく知りたい方は[a要素を使ってリンクをつなげる/HTMLの基本]の記事を参考にしてください。先ほど「img要素は終了タグを持たない空要素」だと説明しましたが、タグで囲まれていないので、空要素は内容を持ちません。内容がないから空要素と呼ばれています。内容の中に別のタグが入ることもあります。下に別の例として「ul要素に入るli要素」を載せます。余裕がなかったら、今は無視してもらって構いません。CodePen.今回は要素の説明は省きます。ulやliについてはまた別記事で解説していきますので、今は深く考えなくて大丈夫です。この例でいくと、『<ul><li>内容</li></ul>』のようにli要素がul要素に囲まれています。ulのように囲んでいる要素を「親要素」、囲まれている要素を「子要素」と呼びます。子要素の中に別のタグが入る場合、それはulから見て「孫要素」となります。HTMLの基本は<開始タグ>内容</終了タグ>基本的なHTMLの書式について解説していきました。『<開始タグ>内容<終了タグ>』というのが基本ですが、全てがこれに当てはまるわけではありません。中には終了タグのない空要素も存在します。ほとんどの要素はこの基本にそっていますので、必ず覚えておきましょう。開始タグの中には属性や属性値が入るということもしっかりと理解しておきましょう。属性="属性値">』となります。全て大文字で書いても小文字で書いても問題ありません。これらは基本的に小文字で記述することをおすすめします。この記事で深く説明はしませんが、他のプログラミング言語を使うとき、HTMLを小文字で書いた方がわかりやすいためです。始めたばかりの今から、「HTMLは小文字で記述する」ということを自分の中で決めておきましょう。け】この記事ではCSSの基本書式について、初心者向けにわかりやすく解説しています。...CSSでできることと組み込み方【初心者向け】CSSでできること、組み込み方を初心者向けに記述した記事です。...初心者向けリストの作成方法【HTML】HTMLでリストを作成する方法を、初心者向けにわかりやすく解説していきます。...初心者向けリンクの貼り付け方法【HTML】こんにちは、Kosei()です。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。