あさくまろん

htmlの基本事項をまとめてみた

htmlの基本事項をまとめてみた

この記事を読んでくれているあなたは、

  • ブログを書きたいと思ってる
  • ブログを書いてるけど、もっと自分の思うように表現したい
  • ブログのカスタマイズをやってみたい
ブログを書くことについて、試行錯誤をしてる途中かと思います。

htmlをマスターすることで、あなたのブログ作成スキルがアップすることは、間違いありません。
ということで、勉強していきましょう。htmlの基本事項のことを。

htmlとは何か

htmlの持つ意味について、しっかり理解していきましょう。

htmlとは、ハイパーテキストマークアップランゲージの略称です。
ハイパーテキストとは、ブログ記事内に他記事へのリンクを張ったり、画像や音声や動画のリンクをブロク記事内に埋め込むためのものです。
マークアップとは、ひたすら書かれただけの文章の羅列に、意味を与えるためのものです。

  • 見出し
  • 段落
  • リスト
文字の羅列に、意味を持たせていきます。
見出しや段落や表やリストのことを、elements(要素)と言います。
ブログ記事は、各要素をマークアップして意味をもたせることで、構造化されていくのです。

ブログ記事を作成するときは、htmlを使って、文書の構造をマークアップしていきます。構造化された文章を、検索エンジンは好みます。

  • 文章自体の内容が充実していて
  • htmlの構造がわかりやすいこと
内容と構造の2つを意識して、ブログ記事を書けば、検索上位を目指すことも可能になってくるでしょう。

htmlではタグを使う

htmlは、タグを使うことによって、文章に意味を与えています。

<h1></h1>

/*<h1>(開きタグ)*/
/*</h1>(閉じタグ)*/

(開きタグ)と(閉じタグ)で、文章を囲むことによって、文章に意味をもたせることができます。
hタグでは、文章に見出しの役割を与えています。

<h1></h1>:見出し
<body></body>:ボディー
<div></div>:ディブ
<span></span>:スパン
<strong></strong>:ストロング(強調)
<p></p>:P(段落)
<a></a>:A(リンク)
<ul></ul>:箇条書き
<li></li>:箇条書き
<ol></ol>:箇条書き

タグをざっと書いてみました。タグを使って、文章に意味を付けていきます。
divタグ、Pタグ、箇条書きは頻繁に使うので、しっかり使い方を理解していきましょう。

よく使うタグについて

タグには、頻繁に使うものと基本的に構造上必要ではあるけど、作業する上ではあまり使わないものがあります。

<html></html>
<head></head>
<body></body>

htmlタグ、headタグ、bodyタグは、構造上必ず必要ですが、ブログ記事作成作業で使うことはほとんどないでしょう。

<h2></h2>:見出し
<div></div>:ディブ
<span></span>:スパン
<strong></strong>:ストロング(強調)
<p></p>:P(段落)
<a></a>:A(リンク)
<ul></ul>:箇条書き
<li></li>:箇条書き
<ol></ol>:箇条書き

見出しタグ、divタグ、pタグ、aタグ、箇条書きタグは、ほぼ毎回と言っていいほどお世話になるであろうタグなので、しっかり使い方をマスターしていきましょう。

ブログ記事は、bodyタグ内に記述される

一つ一つのブログ記事は、bodyタグ内に記述されていきます。

<body>
    <h2>見出し</h2>
    <div>
        <p>テキスト</p>
    </div>
  <p>テキスト</p>    
  <a>リンク</a>
  <h3>見出し</h3>
<div>
  <p>テキスト</p>
</div>
</body>

以下では、bodyタグ内で頻繁に使うであろう、タグについて説明していきます。

hタグで見出しを作ろう

hタグは、見出しを意味します。はてなブログでは、ブログ記事のタイトルにh1タグが使われています。
ですので、文章内の見出しには、h2タグから使っていきます。

    <h2>見出し</h2>
            <p>テキスト</p>
    <h3>見出し</h3>
           <p>テキスト</p>

はてなブログに実装されている見出し機能は、h3から付与する形式になってますので、自分でh2タグをつけるクセを付けていきましょう。

hタグは、h2→h3→h4と順番に記述していきます。
ボクが以前書いた記事も参考にしてみてください。


pタグで段落を作ろう

ブログ記事の本文は、pタグで段落分けされることで、インターネット上、意味のある文章として認識されるようになっています。
はてなブログのはてな記法を使われている方は、pタグが自然と使われているので意識することはないかもしれません。

    <div>
        <p>テキスト</p>
    </div>

ブログ記事デザインの編集作業をするうえで、divタグの中にpタグをいれたりすることがあるので、pタグの意味合いはしっかり覚えておきましょう。

brタグで改行ができる

brタグは、段落分けを伴わない改行をするときに使います。

テキストを記述
<br>
次のテキストを記述

見た目上、改行を入れることができます。
ただし、brタグの連続使用は、html構文上あまり好ましくまりません。
基本的に、文章の改行は、pタグを使って行いましょう。他の改行手段がない場合の最後の方法として、brタグを選択するようにしましょう。

参考になる記事。

divタグでデザインの装飾をする

divタグは、html構文上なんの意味も持たない箱のようなかたまりを意味します。

<div class="reader-button">
  <div class="reader-button-inner">
      <a href="http://blog.hatena.ne.jp/asakumamasaru/www.asakumamasaru.com/subscribe">読者になる</a>
    </div>
</div>

aタグをdivで囲んで、クラス属性を付与しています。cssでクラス属性に対して、デザインを施していますので、記事を見たときにデザインが反映されるようになっています。

  • 枠で囲みたい
  • 背景を付けたい
  • コンテンツを横並びにしたい
デザイン上、divタグでできることは多岐にわたっています。

divタグの詳細は、ボクが以前書いた記事を参考にしてみてください。

デザインについては、cssをまとめた記事が参考になると思います。

aタグでリンクを作ろう

aタグを使うことで、他記事へのリンクを作ることができます。

<a href="リンク先のurl">テキスト</a>
<a href="リンク先のurl"><img src="画像リンク" alt="画像の内容をテキストで書く" /></a>

  • href=""の、""の中にリンク先のurlを記述します。
  • aタグの開きタグと閉じタグの中に、テキストを記述することで、テキストリンクになります。
  • aタグの開きタグと閉じタグの中に、imgタグを記述することで、画像リンクになります。

  • テキスト自体にリンクをつけたり
  • 画像にリンクをつけたり
aタグを自由自在に使って、リンクの使い方をマスターしていきましょう。

delタグで文章をガッツリ取り消そう

delタグは、情報の削除や訂正を、記事上に残しておきたいときに使うものです。
強い取り消しをしたいときに使います。

<del>テキストの真ん中に訂正線が入ります</del>

html構文上、文章が削除及び訂正されたものという意味を、検索エンジンに伝えてくれます。

  • 商品の値段が根本的に改定された
情報自体が、大きく変わってしまったときに、delタグを使ってみましょう。


sタグで文章を軽く取り消そう

sタグは、ブログ記事の見た目上、文章に訂正線を入れるときに使います。
html構文上、検索エンジンに訂正や削除を伝える意味合いはありません。

<s>テキストの真ん中に訂正線が入ります</s>

  • 通常価格から、セール価格になってることを伝えたいとき
  • イベントの開催日時が変わったことを伝えたいとき
sタグは、読者から見たときにわかりやすいように使う訂正機能、だと考えてください。

参考になる記事。

strongタグで文章の大事な箇所だけを強調する

strongタグは、記事内でもっとも重要な箇所を強調するときに使います。

<strong>もっとも強調したい文章</strong>

ブログ記事で、一番伝えたい箇所を強調するときに、使ってみましょう。
頻繁に使うタグではありません。太字で見た目上強調したいのであれば、後述するbタグを使いましょう。

bタグで文章を太字にして目立たせよう

bタグは、テキストを太字に装飾するときに使います。
html構文上、特に意味を持つものではありません。

<b>テキストを太字にして目立たせる</b>

ブログ記事の見栄え上、ちょっと太字にしたいときに使ってみましょう。

参考になる記事。

emタグで文章を斜体にして強調する

emタグは、文章を斜体にして強く強調したいときに使います。
strongタグよりも、強調の意味合いが少し弱くなります。

<em>テキストを斜体にして強調する</em>

文章の見栄えを斜体にして、html構文上も強調したいときにemタグを使ってみましょう。

iタグで文章を見た目上斜体にする

iタグは、文章を見た目上斜体にして装飾するために使います。
emタグのような、html構文上強調する意味合いはありません。

<i>テキストを見た目上斜体にする</i>

文章を斜体にして、なんとなくデザイン的に目立たせたいときにiタグを使ってみましょう。

smallタグで注釈や細目を表す

smallタグは、注釈や細目を表すために使います。

<small>コピーライトや免責事項を記述する</small>

smallタグに、文章の意味合いを弱める意味はありません。
html5になってニュアンスが変わったので、以前から知っている方は、注意して使いましょう。

  • コピーライト
  • 免責事項
  • 規約文書
  • 法的制約
  • 警告
コピーライトや免責事項、警告に使うことがあるので、意味合いを理解しておきましょう。

参考になる記事。

rubyタグで文字にルビをふる

rubyタグは、テキストにルビをふるときに使います。
ルビとは、ふりがな、別の読み方などの意味合いを持つ文字を、記事本文の文字より小さく上部もしくは下部に記述するものです。

<ruby>四面楚歌<rt>しめんそか</rt></ruby>

ルビに対応したブラウザでは、rubyタグとrtタグをつかうことで、ルビが表示されます。

<ruby>四面楚歌<rp>(</rp><rt>しめんそか</rt><rp>)</rp></ruby>

ルビに対応してないブラウザでは、rpタグを使うことで、四面楚歌(しめんそか)のように、ルビが括弧閉じで表記されるようになります。
rpタグで、左右のカッコを囲むことで、上もしくは下のルビの代わりに、文字の右に括弧つきで表示されます。
すべてのブラウザに対応させたいなら、rpタグも使った表記の方法を覚えておきましょう。

参考になる記事。

blockquoteタグで長い文章の引用をする

blockquoteタグは、改行の必要な長い文章を引用するときに使います。

<blockquote>
<p>長いテキストの始まり~
長いテキストの終わり</p>
</blockquote>

blockquoteタグを使って、テキストのどこからどこまでの内容が引用部分を表しているのか、明示しておきましょう。
検索エンジンから、スパム扱いされないようになります。

blockquoteタグは、ブロック要素しか内包できません。必ず、pタグ等のブロック要素で囲んだテキストを、blockquoteタグで囲むようにしましょう。

参考になる記事。

qタグで短い文章の引用をする

qタグは、改行の不要な短い文章を引用するときに使います。

<q><p>短い文章</p></q>

文章内で、どこからどこまでが引用箇所なのか明示したいときに使いましょう。

  • blockquoteタグは、改行の必要な長い文章の引用をするときに使う
  • qタグは、改行の不要な短い文章の引用をするときに使う
blockquoteタグとqタグの違いを、押さえておきましょう。

まとめ

  • htmlとは何か
  • htmlではタグを使う
  • よく使うタグについて
  • ブログ記事は、bodyタグ内に記述される
  • hタグで見出しを作ろう
  • pタグで段落を作ろう
  • brタグで改行ができる
  • divタグでデザインの装飾をする
  • aタグでリンクを作ろう
  • delタグで文章をガッツリ取り消そう
  • sタグで文章を軽く取り消そう
  • strongタグで文章の大事な箇所だけを強調する
  • bタグで文章を太字にして目立たせよう
  • emタグで文章を斜体にして強調する
  • iタグで文章を見た目上斜体にする
  • smallタグで注釈や細目を表す
  • rubyタグで文字にルビをふる
  • blockquoteタグで長い文章の引用をする
  • qタグで短い文章の引用をする

ざっとまとめてみましたけど、自分が気になるタグから使ってみましょう。

特に、hタグ、divタグ、pタグ、aタグは頻繁に使います。ガッツリ頭に叩き込んでおきましょう。使い方を。
タグを使い続けていけば、必ず使いこなせるようになります。

参考にした記事。