HTMLが何か分かってきたところで、タグの基本知識を学んでいきましょう。
実はこの『HTML』、すごく単純なルールで構成されています。
今回はそのHTMLが、どのようなルールでできているか解説していきます。
HTMLとは何か分からない方は、以下のリンクから読んでください。
記事内容の仕分けをしよう！
HTMLをコーディング（記述）するには、そのサイトの構造を細かく分けていく必要があります。
１つ１つの文字や文章などを仕分けしていくイメージだよ。
サイトや記事（素材）の準備をしよう！
まずは簡単な記事を準備しましょう。
はじめてのHTML
はじめてHTMLを書いてみた。
難しく考えずにまずはここを理解しよう。
それではこの記事を仕分けしてみよう。
仕分けをして行こう！
この文章は大きく『見出し』と『段落』に分けることができます。
表現すると以下の感じになります。
<ここから大見出し>
はじめてのHTML
<ここまで大見出し>
<ここから段落>
はじめてHTMLを書いてみた。
難しく考えずにまずはここを理解しよう。
<ここまで段落>
HTMLで仕分けをする時に『<』と『>』で表現するすることを覚えておきましょう。
仕分けした内容に『ここまで』と表現しよう！
次にHTMLでは『ここまで』という意味を『/』で表現するルールがあります。
ここまでと記述する方法もHTMLの基本となるので覚えておきましょう。
表現すると以下の通りです。
<ここから大見出し>
はじめてのHTML
</大見出し>
<ここから段落>
はじめてHTMLを書いてみた。
難しく考えずにまずはここを理解しよう。
</段落>
どうですか？少しスッキリしたと思います。
しかし、日本語ではPC（ブラウザ）がHTMLだと認識しません。
次に英語で表現してみます。
仕分け内容を英語で表現しよう！
HTMLでの見出しには大見出し、中見出し、小見出しとあります。
これらを表現するときに大見出しは”１”中見出しは”２”・・・といった具合に
数字が小さいほど大きな見出しを意味します。
ラーメン屋一覧・・・H1
○○軒・・・・・・H2
○○軒の場所・・・H3
▲▲亭・・・・・・H2
▲▲亭の場所・・・H3
こんな感じでいいのかなぁ。。。
いい感じ！
その通りだよ！
そこで、見出しを英語で『heading』。
今回は見出しは１つなので”１”を使って『heading1』とします。
そして段落は英語で『paragraph』なのでこちらを使って表現すると以下のようになります。
<heading1>
はじめてのHTML
</heading1>
<paragraph>
はじめてHTMLを書いてみた。
難しく考えずにまずはここを理解しよう。
</paragraph>
ちょっとプログラムらしくなってきました。
英語を短縮して表現しよう！
そしてHTMLでは、これら英語（単語）の頭文字で表現します。
英語をいちいち記述するのって大変だよね。
そこでHTMLのコーディングでは短縮語を使うんだ。
へぇ！
女子高生みたい！！！
。。。
表現すると以下の通りです。
<h1>
はじめてのHTML
</h1>
<p>
はじめてHTMLを書いてみた。
難しく考えずにまずはここを理解しよう。
</p>
いかがでしょう。だいぶスッキリしましたね。
これで今回の記事のHTML化は完了です。
なんだか私でも出来そうです！
HTMLのルール自体は難しく無いから頑張ってね。
- H1・・・大見出し
- ｐ・・・段落
今回の内容は理解できたでしょうか。
一つ一つをみていくと、理解はできると思います。
皆さんもどんどん記事を書いて、見出しの付け方や段落について慣れていきましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
