岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

HTMLタグ入門【初心者向け_ホームページ作成の基本】

公開日:2015年7月3日 : ホームページ制作関連

HTMLタグ入門【初心者向け_ホームページ作成の基本】_カバー画像

前回は、HTMLとはなんぞや?という基本的な説明をしました。今回は、HTMLタグについての内容です。慣れない内は、よく分からない宇宙語みたいで頭が痛くなりますが、HTMLの仕組み自体はそれ程むずかしくはないので、徐々に慣れていきましょう。
あまり深く考えず、とりあえず「文章をタグで囲えばOK」と思っていれば大丈夫です。

今回は、サンプルコードをもとに使用しているタグを順番に説明していきます。

HTML5で記述

HTML5ロゴ

HTMLにはバージョンがあり、現在HTML5が最新です。この記事ではHTML5の記述方法で説明していきます。ちなみに、HTML5は2014年に正式勧告されました。HTML4と比べてタグの記述がシンプルになったので、個人的にはその点が良いなと思っています。

HTML5の特徴

  • タグの記述がシンプルになった(doctype,meta,link.style,scriptなど)
  • 動画や音声データをこれまで主流だったFlashをを使わずに、HTMLのみで扱える
  • 文章構造を明確化できる新しい要素が増えた(section,article,aside,nav,hgroup,header,footerなど)

大きな特徴を紹介しましたが、この辺りのことを初心者の方が気にしだすと、面倒くさくなってしまうので、今はさらっと流して次に行きましょう。

HTML構造

HTML構造_図

HTMLの構造は大きく分けるとこのようになっています。簡単ですね。ここだけ間違って記述しなければ、とりあえずページは表示されます。これはルールなので、どのページでも同じように記述します。(サイト規模の大小、種類も関係ありません。どのサイトのページでも同じです)

DOCTYPE html(ドックタイプ宣言)

まずこのタグを必ず記述します。この短い文を書くことで「このファイルはHTML5で作りましたよ」ということをコンピューターに宣言しています。(これを文章型宣言と呼びます)5という数字が入っていませんが、この表記で正しいです。

html(エイチティーエムエル)

DOCTYPE宣言のすぐ後に配置して、htmlタグで全体を囲みます。(上記図を参照)すべての内容がこのhtml要素で内包されます。

head(ヘッド要素)

ヘッド要素は、ブラウザにページを正しく表示させるために必要な情報を記述する箇所です。HTML文章に関する情報を記述します。例えるならページの取り扱い説明書でしょう。

具体的には、文字コード、タイトル、ページの概要 (meta 要素)、CSS、Javascriptなどをこの中に記述します。

ヘッダー内の記述のほとんどは、ブラウザの閲覧ページ内に表示されることはありません。(ページには表示されませんが、とても重要な部分です。ここで記述するタイトル、ページ概要の文章は検索結果ページに表示されます)

body(ボディ要素)

ボディー要素の中に書かれた内容が、ブラウザの画面に表示されます。テキスト、画像、映像、音声などの情報を記述できます。

基本の記述

最低限これだけ記述してあればOKという要素を書いてみました。これだけコピペすればあとはbody要素の中に、ページの内容をつくるのみであります。

要素内のコードについて

要素内に記述している内容を説明していきます。

補足

今回のソースコードにはありませんが、通常ホームページ制作を行う場合は、この他に、css、jsなどのファイル(ホームページの見た目や動きをつくる)を読み込む記述もhead要素に書きます。
※css、jsについては、次回以降の記事でくわしく説明します。

lang属性

コードの言語が日本語であることを宣言します。html要素のlang属性に”ja”を指定します。翻訳機能、音声再生機能にも使用されるので、必ず記述しましょう。(英語なら”en”)

文字コード

文字コード(HTML記述形式)を指定します。このコードを指定しないと文字化けの原因になりますので、必ず指定しましょう。日本語であれば、”UTF-8″を使用することが一般的です。(HTML5では”UTF-8″が推奨されています。)

ページタイトル

ここにページのタイトルを書きます。ここの内容は、検索結果、ブラウザのタグ、ブックマークの名前などに使用されます。本の表題みたいなもので、検索エンジンもこの情報を1番重要な要素として、検索結果に反映させます。SEO対策でも重要な部分です。ユーザーが検索に使うキーワードを含んだタイトルにすることがポイントです。

ページ説明

description(ディスクリプション)は日本語で「説明」という意味です。文字通りページ説明、概要を記述しまます。SEO的には、この部分は評価の対象となっていませんが、ブラウザの検索結果にタイトルの下に表示される部分なので、ユーザーが読んだときにクリックしたいと思うようなページ説明を書くことが必要です。

ページキーワード

keywords(キーワード)はページの内容で使用している特に重要なキーワードを「,」(カンマ)で区切って記述します。昔はキーワードの内容を記述することに意味がありましたが、現在では、ディスクリプション同様にサポート対象外です。必須ではありませんが、1,2単語書いておけば十分でしょう。

よく使うHTML

初期設定の記述ができたら、<body>~</body>の中にWebページの内容を書いていきましょう。では早速、本文中でよく使う「これだけ知っていればWebページが作れる!」というHTMLタグを紹介していきます。

ブログの更新やWebページの追加など、ここで紹介するタグを使えればバッチリ対応できます。(実務でもここで紹介するタグでの記述が8割くらいになります)

まずはじめに、下記で説明するタグの完成図を用意しました。りんご専門サイトの「ふじページ」を想定して作りました。(特に意味はないのであしからず…)

HTMLファイルの作成方法

これを、Windowsであればメモ帳、Macであれば、テキストエディットなどにコピペして、保存します。拡張子を「.html」にして、Webブラウザで開くと(ブラウザの画面にファイルを直接ドラッグ&ドロップでもOk)、同じ画面で表示されるはずです。(ブラウザの種類で文字の大きさなど若干の違いあり)

※プロの業務では、Dreamweaver、coda、Sublime Textなどのソフトを使用してコードを書くことが多いです。

サンプルコードのブラウザ確認はこちら>>

サンプルコードのブラウザ確認はこちら>>

ブラウザ表示画面

サンプルページ_ブラウザ表示画面

上記のソースコードやブラウザ画面を参考にしながら、下記の説明を読んでいただければと思います。

h1~6(heading)

見出しに使用するタグです。h1タグは特に重要です。見出しをつけなくてもページは作れますが、見出しがあることで、内容にまとまりができて記事が読みやすくなります。また検索エンジンに記事の内容を正確に伝える必要もあるので、見出しは適切に使いましょう。

p(paragraph)

本文中の段落です。通常の文章はPタグを使います。hタグの下に配置すると良いです。

br(break)

文章を改行するときに使用します。

a(anchor)

リンクタグです。アンカーとも呼ばれます。内部ページ、外部ページどちらへのリンクもこのタグを使用します。

img(image)

画像を表示させるためのタグです。画像へのリンクURLを記述することで画像を表示させます。検索エンジンはページの情報を「文字」で判断しています。画像ばかりのページでは、ページの内容が理解できません。テキストと画像はバランスよく使用しましょう。またimgタグには、alt属性があり、ここに画像の種類や内容を記述することで、検索エンジンに画像の内容をテキストで伝えられます。必ず設定しておきましょう。

ul(unorder list) li(list)

リストタグです。箇条書き、数字順での説明などに使用します。数字順にする場合は、ulの箇所をolにします。liタグ単体では使用しません。必ずul、olで囲います。

table(table)

表で情報を表示するためのタグです。table要素単体では利用できません。tr、th、td要素と組み合わせ利用します。

divタグ

入れ物のように使用するタグです。ページをブロックで区切る役割を持っています。今回は使用していませんが、とても良く使うタグです。次回のCSSを説明する記事で詳しく説明します。

spanタグ

インライン要素のタグで、主にテキスト情報に使用されます。単体ではなんの意味も持ちません。CSSを使用するためのタグです。こちらも次回説明します。

まとめ

すこし長くなってしまいましたが、HTMLタグ入門【初心者向け_ホームページ作成の基本】いかがでしたでしょうか。実際にページ作成でよく使うタグは以外と少ないです。難しいという印象を持っている方にとって、ブログ更新やWebページ作成などの助けになれば嬉しいです。

次回は、今回説明できなかった、HTML5から加わった新しい要素(section,article,aside,nav,hgroup,header,footerなど)とCSSの説明します。

今回作成したHTMLファイルを基にして、通常私たちが見ているデザインされたWebページがどのように作成されているのか?実践的な記事にしたいと思います。

それではまた次回!


スポンサーリンク

Mblog

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています