HTMLの基本とその構造
HTMLを始めるために、まずは何を学べばいいのか。最初はわかりませんよね。
その第一歩はこれ！タグの理解です。
今見ているこの記事も含め、世の中のWebページはすべてHTMLで書かれているのですが
HTMLはタグによってWebページに文章構造の意味を知らせる役目をしています。
「タグって何？？」
そんなゼロ知識の方も、この記事を読めばHTMLの基本知識がわかります！
- HTMLって何？？
- タグの役割
- タグの構造
これらが理解できる内容になります！
HTMLってそもそも何なのか
HTMLは「HyperTextMarkupLanguage」の略で、ハイパーテキストを書き記すことができるコンピューター言語ってことです。
ハイパーテキストとは、複数の文章を結びつける仕組みのこと。
簡単に言えば、Webサイト上でリンクをクリックすると、他のページ（文章）に飛ぶことができますね。これがハイパーリンクです。
それを書くことが出来る言語がHTMLなのです！！
タグがなぜ必要なのか
次の例文を見てみましょう
高校教師がプログラミングに挑戦！！
私立高校教師のじ‐ないんがゼロ知識からプログラミングに挑戦しています。毎日の勉強での学んだことをブログで発信していきます！同じようにこれからプログラミングを始める人のヒントになればと思っているので、よろしくお願いします！！
以上の文章は、「高校教師がプログラミングに挑戦！！」という見出しと
「私立高校教師の～」という段落（本文）とに分かれていますね。
このような文章上の役割をHTMLで示していきます。
どこからどこまでが見出しなのか、段落なのか、その始まりと終わりに印を付けていくことで、その役割を示していくのですが
＜ここから＞高校教師がプログラミングに挑戦！！＜ここまで見出し＞
＜ここから＞私立高校教師のじ‐ないんがゼロ知識からプログラミングに挑戦しています。毎日の勉強での学んだことをブログで発信していきます！同じようにこれからプログラミングを始める人のヒントになればと思っているので、よろしくお願いします！！＜ここまで段落＞
このように日本語で書かれても、コンピュータは認識できません
そこで登場するのがタグなのです！！
見出しは英語で「Header」なので＜h＞タグで表し
段落は英語で「Paragraph」なので＜p＞タグで表します
なので、先ほどの文書は
<h1>高校教師がプログラミングに挑戦！！</h1>
<p>私立高校教師のじ‐ないんがゼロ知識からプログラミングに挑戦しています。毎日の勉強での学んだことをブログで発信していきます！同じようにこれからプログラミングを始める人のヒントになればと思っているので、よろしくお願いします！！</p>
このようにタグを使って表すのです！
「おいおい、hとかpの前 / がついたりつかなかったり、なんで！？」
と思った方、それが次の内容です。
タグの作り
タグには先ほどのような、見出しを表す＜h＞タグや段落を表す＜p＞タグの他にもたくさんの種類があります。
しかし、その基本的なつくりはほとんど同じです。
- ＜～＞の中に入るhやpのように、どのような役割かを表すものを「要素名」という
- 始まりを表す開始タグと、終わりを表す終了タグがある
- 開始タグと終了タグで挟まれた部分が、要素。
- 終了タグは要素名の前に / を入れる
なので、基本は下のような形になります。
＜要素名＞ 要素 ＜/要素名＞
中には終了タグが必要ない要素も存在しますが、それはその都度覚えればOKです。
HTMLの学習とはタグの学習
HTMLはタグを組み合わせて、印を付けながら文章を書いていくものです。
つまりHTMLの学習とは、タグを使えるようになることに等しいのです！
タグの使い方をマスターすれば、HTMLもマスターしたも同然です。
ただし、タグは100種類以上あってすべて覚えるのは大変です。
でも安心してください！すべて覚える必要なんてありません。
必要最低限のタグを覚えて使えるようになれば、その他のタグは必要に応じて調べながら使うことができるようになります。
主要なタグと、その使い方を学んでいく。これがHTMLの学習の第一歩になるのです！
