web業界で関わらない人はいないHTML。

webサイトやメールにも使われていますが、初心者からするといまいちなんのことかわからない人も多いのではないでしょうか？
ぼくは最初なんのことか全くわからなかった。

これからwebデザイナーを目指す人やweb業界を目指す人、また会社でワードプレスでのブログ更新を任された人も知ってれば表現の幅も広がること間違いなし！

HTMLの正体を知って、web業界へ一歩踏み出そう！

HTMLとは？

一言で言えば、「webサイトの骨組みとなる言語」。
HyperText Markup Languageの頭文字を取ったもので、マークアップ言語と呼ばれています。

なぜHTMLが必要なのか誰

理由はただ一つ。

HTMLで作成したファイルでなければ、ブラウザが認識できず、webサイトとして表示されません

僕らが普段観ているサイトも、このブログ自身もHTMLファイルをブラウザによって表示させています。
HTMLファイルでなければwebサイトに表示させることすら出来ないので、まさにwebサイトの土台の知識と言えるのです。

HTMLの記述ルール

HTMLを記述するときはタグと呼ばれるもので文字を挟み込み、どの様に表示させるかを決めます。
開始タグ<oo>　〜　</oo>終了タグの間にタグの効果を反映させます。

基本的なタグを覚えてHTMLの第一歩を体験してみましょう。

主なタグの種類と意味

<p>タグ

<p>タグは段落を意味します。

通常の文章は<p>タグで表示させるため、文章の塊ごとに<p>タグで挟み込んで使います

<p>タグで挟んだ文章はそのまま表示されます。

実行結果

これは文章です

<a>タグ

<a>タグはリンクを埋め込む際に使います。

<a>タグは基本的にhref(エイチレフ)と呼ばれる属性と一緒に表記します。
タグに挟まれた文字に、href属性で指定したURLに移動させることが出来るのです。

実行結果

ゲンフリ・トップページ

クリックすると、ブログのトップページに飛べることが確認できたかと思います。

<h1>〜<h6>タグ

<h1>〜<h6>タグは見出しタグと呼ばれ、タグで書くんだ文字が見出しとして認識されます。
数字が大きいほど大きな文字で表示されます。

実行結果

cssなどの装飾がなくても、自動で設定したフォントサイズで大きさを調整してくれています。

ちなみにこのページだとこのようになっております。

ブログの場合、ページのタイトルやロゴが<h1>、ブログタイトルなどが<h2>タグで作られることが多いため、記事内容では<h3>以降で見出しを作成するのが一般的かと思います。

SEO対策のためにも見出しタグは乱用せず、ルールに沿って使うことをお勧めします。

<img>タグ

＜img>タグは画像を表示させる時に使います。
終了タグは必要ありません。

こちらはsrc属性に画像のURLを、alt属性に画像の説明文を入力します。

実行結果

これで画像が表示できました。

<ol> <ul> <li>タグ

これらはリスト、箇条書きを作るタグです。
<ol>、<ul>タグの中でリストにしたい文字列を<li>タグで囲っていきます。

<ol>タグ

ordered listの略。
番号やabcなどで順序を表すリストが作成できます。
type=”1″ や　type=”A”など併記することで先頭の文字を任意の文字に変更できます。

実行結果

<ul>タグ

unordered listの略。
順序のない箇条書きリストを作成できます。

実行結果

まとめ

今回はブログページなどで主に使うHTMLのタグ5つについて説明しました。
ワードプレスなどでブログをHTMLテキストエディタで編集する際は、これらのタグの意味がわかるだけで編集しやすくなると思うので是非ご参考に。

ここに載ってないタグを詳しく調べたい方は下記サイトがオススメです。

HTML クイックリファレンス
http://www.htmq.com/