
HTMLが何か分かってきたところで、タグの基本知識を学んでいきましょう。
実はこの『HTML』、すごく単純なルールで構成されています。
今回はそのHTMLが、どのようなルールでできているか解説していきます。
HTMLとは何か分からない方は、以下のリンクから読んでください。
記事内容の仕分けをしよう!

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