HTMLを学ぶ。body要素内に記事を書く。

HTMLを学ぶ。body要素内に記事を書く。

今回はいよいよ記事を書いていく作業を覚えていきます。
まずは以前簡単に解説した、見出し要素と段落要素について詳しく解説していきます。
以前解説した内容については以下の記事を参考にして下さい。

タグの基本知識を学ぶ。H1タグとPタグ

いよいよ記事を書いていく

今回は以下のような記事をHTMLで記述していこうと思います。

はじめてHTML書いてみた。
今回使用するタグ
Hタグ
Pタグ
Hタグとは
見出しを表すタグです。
Pタグとは
段落を表すタグです。

H要素で見出しをつけていく

この記事にまずは見出しをつけていきましょう。
本の目次をイメージすると、分かりやすいかもです。
記事の内容のイメージは以下の通りです。

はじめてHTML書いてみた。 → 題名
今回使用するタグ → 見出し
Hタグ → 内容
Pタグ → 内容
Hタグとは → 見出し
見出しを表すタグです。 → 内容
Pタグとは → 見出し
段落を表すタグです。→ 内容

では見出しにランク付けしていきましょう。
ランクは大見出し/中見出し/小見出しで表現しておきます。

はじめてHTML書いてみた。 → 大見出し
今回使用するタグ → 中見出し
Hタグ → 内容
Pタグ → 内容
Hタグとは → 小見出し
見出しを表すタグです。 → 内容
Pタグとは → 小見出し
段落を表すタグです。→ 内容

これらの見出しをHTMLで表現すると、以下のようになります。

<h1>はじめてHTML書いてみた。</h1>
<h2>今回使用するタグ</h2>
Hタグ
Pタグ
<h3>Hタグとは</h3>
見出しを表すタグです。
<h3>Pタグとは</h3>
段落を表すタグです。

どうですか?このようにHTMLではH1から順に見出しの大きさが変わっていきます。これらはSEO対策でも必須のスキルとなる為、適切な見出しタグを使用することが大切です。
SEO対策についての解説については以下の記事を参考にしてみて下さい。

SEO対策について知る。ブログアクセスアップの第一歩。

そしてここで注意したいのが、HTMLで見出しタグを記述すると文字の大きさや太さが変わりまが、見出しタグで文字の大きさや太さを変えるのはやめることです。
後にCSSの言語で文字の大きさや太さは変更することができますし、見出しタグの優先順位が変わってしまうと、レイアウト崩れやSEO対策が無駄になってしまう原因となるからです。

P要素で段落をつけていく

次に先程の記事の内容(文章)となる部分へP要素を記述していきます。
P要素は段落を表す要素でした。
以前の解説については以下のリンクを参照下さい。

タグの基本知識を学ぶ。H1タグとPタグ

では先程イメージした記事の内容から確認してみましょう。

はじめてHTML書いてみた。 → 大見出し
今回使用するタグ → 中見出し
Hタグ → 内容
Pタグ → 内容
Hタグとは → 小見出し
見出しを表すタグです。 → 内容
Pタグとは → 小見出し
段落を表すタグです。→ 内容

これらに先程、Hタグを記述したHTMLソースへP要素を記述していきます。

<h1>はじめてHTML書いてみた。</h1>
<h2>今回使用するタグ</h2>
<p>Hタグ</p>
<p>Pタグ</p>
<h3>Hタグとは</h3>
<p>見出しを表すタグです。</p>
<h3>Pタグとは</h3>
<p>段落を表すタグです。</p>

いかがですか?これで今回のミッションは完了です。
それでは完成した記事をブラウザで確認してみましょう。

このように表示されていれば、今回の記事作成は完了です。

くれぐれも文字の大きさや太さをHタグで表現しないようにして下さいね。
これらはCSSの言語でいくらでも調整できます。

いかがだったでしょう。案外慣れてくると簡単な作業です。
記事を量産してH要素、P要素を自分のものにして下さい。
それでは今回はここまで。。。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事