どうも、りかちゅうです！みなさんはWEBサイトというものを使ったり、見たりしていると思います。求人サイト、会社のホームページ、会員サイトなど。今の時代はネット社会ですからサイトを使わない人なんていないに等しいです。なんで、そんな話をしているのか？それはWEBサイトには色んな言語を使って作られているからです。HTML、CSS、JQuery、Java Script、phpなどがまさにそうですね。もちろん他にもあります。でも、どれが何のためにあるのかわからない人もいます。そうですよね。知識がない人からすると何語となります。ですので、1から教えたいと思います！まずは土台となるHTMLです。
※他の言語に関しても別記事にてきちんと話していきます！
HTMLとは何か？
前置きでHTMLはサイトの土台となると言いましたがどういうことと思う方もいるかもしてません。ですので、詳しく話したいと思います！HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の頭文字をとった略称です。意味がわからないから言語も解説しろって？しまますよ！
まずハイパーテキストとはコンピューターを利用した文書作成・閲覧システムの1つで、複数の文書を相互に関連付け、結び付ける仕組みです。
次にマークアップとは、文書構造や装飾などの情報を正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」といった識別のための目印を使い意味付けを行っていくことです。最後にランゲージは言語です。
まあ、文書構造や装飾などの情報を正しく認識させたり、複数の文書を相互に関連付けたりしながらサイトの土台となるファイルを作成する役割のある言語と思ってください！顔で例えるなえらば輪郭、目の大きさなどの骨格みたいなものですね。これは慣れていけばどういうことかはわかります。
※HTMLはのちほど話すコンテンツの部分以外は半角で書きましょう！スペース含め全角は禁止です。コンテンツのところはケースバイケースです。
HTMLの書式
HTMLはサイトの土台となる言語ということは分かったかと思います。でも、どうやって土台を作るのとなりますよね？もちろんそこら辺も下の画像を参考にして教えますよ。
※この画像は「HTML5&CSS3 デザインレシピ集」の19ページに載っているものです。
1.タグとタグ名
タグには開始タグと終了タグがあります。その2つでコンテンツを囲みます(写真でいうと①です)。そうすることで、コンテンツに「意味付け」をすることができます。書き方としては開始ダグは「<>」で終了タグは「</>」です(終了タグは「/」を忘れないでください！)
ただ、タグだけでは意味のないものです。そこで、タグ名というものがタグの意味を決めています(写真でいうと②です)。ちなみに写真の場合は「a」です。意味はリンクを付けてほしいということです。どういう仕組みかは別記事にて話しますね。今の段階ではリンクを付けるためのタグと思えばいいです。
2.属性と属性値
タグに追加的な情報を加える時に属性と属性値を含めます。aタグの場合は「href属性」というものを追加することが出来ます。その際に属性値を追加しないといけません。href属性の場合はリンク先のURLという名の属性値(URL以外にも指定できるものもありますが割愛します)を指定します。その際に属性値は「”」または「’」で囲ってください！
また、属性によっては複数に値を指定することができるものもあります。その際は属性と値の間には半角スペースを入れてください！図としてはこのような感じです！
※この画像は「HTML5&CSS3 デザインレシピ集」の19ページに載っているものです。
※属性と属性値は場合によってはない時もあります。要するに、この2つはなくても成り立つということです。
3.コンテンツ
図を見れば分かりますが開始タグと終了タグに囲まれる部分のことをコンテンツと言います。実はブラウザに表示されるのはコンテンツのところのみです。コンテンツにはテキストが含まれることもあれば他の要素が含まれることもあります。ちなみに、要素の中に要素が入っていることを入れ子と呼びます。
4.要素
タグとそのコンテンツを合わせて要素と言います。
※空要素
ほとんどのタグには開始タグと終了タグがあります。ですが、いくつかのタグには終了タグがないです。そのようなタグは空要素と呼ばれています。これはやっていくうちに覚えていきます。
HTMLの構造
書き方としてはこんな感じです。詳しいことは別記事にてたくさん書きます。さて、HTMLこのような書き方をしながらどういう構造で成り立っているのか？ここら辺も話しますね！
1.ツリー構造
タグのコンテンツには別のタグを含めることが出来ます。それ故に要素と要素の間に階層関係が出来ます。図はこちらです。
この階層関係をツリー構造といいます。簡単に説明すると<html>のタグが一番上にあってそこから<head>タグと<body>タグに枝分かれされている感じです。家族で例えるならhtmlタグはお父さんで<head>と<body>は子供だと思ってください！私的にはHTMLは家族構成と似たような一面のある言語だなと思っています。
※この画像は「HTML5&CSS3 デザインレシピ集」の21ページに載っているものです。
2.親要素と子要素
このように、HTMLはツリーのような構造になっています。ただ、それだけはないです。ツリー構造の中にも色々な関係があります。ですので、その話もしますね。まずは親要素と子要素から！こちらを見てください！
こちらは私が書いたものです。<html>要素と<head>要素・<body>要素を見てください！<html>要素の中に<head>と<body>の要素が入っていると思います。その際に<head>要素も<body>要素も改行しているだけでなく、1つ分空白がありますよね？正式に言うと<head>要素、<body>要素は1つ下の階層にいる状況です。なんでそのように書くのか？それは親子関係だからです。これを専門的には<html要素>が親要素、<head>要素と<body>要素が子要素と言います。
※<head>要素と<body>要素の関係は後ほど話します。
3.祖先要素と子孫要素
HTMLの世界の中に親子関係があるなら子供と孫の関係だってあります。こちらを見てください！内容はヲタクなものですいません。気にしないでください。
<article>要素の中には<h>要素、<p>要素、<ul>要素があります(どういう意味合いなのかは一旦考えなくていいです)。今回注目してほしいのは<ul>要素です。<ul>要素の中に<li>要素があると思います。もちろん<ul>要素と<li>要素は親子関係です(そう言った方が分かりやすいですよね)。じゃあ、<article>要素と<li>要素はどんな関係ですか？<article>要素がおじいちゃんまたはおばあちゃん(専門用語では祖先要素)で<li>要素は孫(専門用語では子孫用語)です。
じゃあ、ひ孫みたいな関係もあるのと思いますよね？ツリー構造上はあります。ですが、用語としては祖先要素と子孫要素として扱われます。
4.兄弟要素
head要素とbody要素の関係です。あとはli要素もそうです。関係としては先に出でくるのを兄要素、後に出でくる要素を弟要素と言います。何人兄弟かはケースバイケースです。たくさんいるパターンもあります。また、すぐ次の弟要素またはすぐ前の兄要素を隣接要素と言います。
まとめ
自分なりに頑張って書きました。ここらへんは形式的なことなので深く考えすぎないでください！ただ、書き方は間違えないでください。そこら辺さえ押さえておけばなんとななります。また、どんどん書いたり見たりしていけばどういう構造にすればいいかが分かってきます。逆に書かければ身につきません。ですので、具体例は別記事で話しますのでひたすら書くことをおすすめします！以上です！最後まで読んでいただきありがとうございました。
りかちゅう