HTMLでコーディング。初心者の為の基本知識。HタグとPタグで学ぶ。

HTMLでコーディング。初心者の為の基本知識。HタグとPタグで学ぶ。

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を学ぶ。シリーズはこちら

HTMLカテゴリの最新記事