【保存版】いちばんわかりやすいHTMLの基本構造

こんにちは!ディアントのトータルデザイナー三宅です!

ホームページはHTMLとCSSという言語で記述されて表示されていることをご存知ですか?

このHTMLとCSSという言語。

一見すると難しそうに感じると耳にします。

ですが!ルールと基本を知ってしまえばそこまで難しくありません。

そこであなたのホームページ運営のためにもHTMLの基本をお勉強しませんか?

HTMLとCSS言語が分かれば更新や修正もぐんと簡単になります。是非この機会に勉強していってくださいね!

 

この記事はこんな方に向けて書かれています。

この記事は「HTML言語を勉強してみたいけど難しそう…」「HTML言語を使っているけどなんとなくしか知らない…」そんな方向けに書かれています。

 

この記事を読んだらこんなことが分かります。

この記事を最後まで読めば、HTML言語の基本構造、基本原理、HTML言語の読み方が分かります。

 

そもそもHTMLってなに?

HTMLとはホームページの画面を表示させるための言語を指します。

HTMLとCSSという2種類の言語でホームページは表示されています。

その中でもHTMLは、ホームページの基本構成を担当する言語なのでHTMLを覚える事でページを作ることができるようになります。

ホームページはその他にもPHP言語やjavascript言語などがありますが、メインはHTMLやCSSを覚えてからその他の言語を勉強することをおすすめします。

HTMLの構造

HTMLは「要素」「属性」「属性値」の3種類で構成されています。この3種類についてまずは理解する必要があります。

要素について

要素とは段落として示すときや改行する時などに示すタグです。

例えばpタグは、段落を示すタグです。開始タグと終了タグで囲う事でここまでが段落ですよと指定をすることができます。

brタグは改行タグです。brタグの様な属性を持たない要素を空要素と言います。

属性と属性値とは

属性と属性値は上記の様な形のものを指します。

aタグと呼ばれるリンクを貼るための要素の中にある「href=””」が属性になります。

このhrefはリンク先のURLを指定するための属性です。そしてこの場合指定するURLが属性値になります。

全体の構造を見てみよう。

これらの要素や属性を使い記述することでホームページのページは構成されていきます。全体図を見てみましょう。

記述の順番は、「DOCTYPE宣言→htmlタグ→headタグ→bodyタグ」の順に記述をしていきます。

実際にブラウザに表示されているのはbodyタグの部分が表示されています。その他のタグの役割を解説していきましょう。

DOCTYPE宣言

DOCTYPE宣言とはDocument Type Definitionのことを指し、日本語に訳すと「文書型宣言」となります。

HTMLにはバージョンがあります。

このページはどのバージョンのHTMLで作成されているかを宣言する役割を持っています。

htmlタグ

htmlタグとはhtml文書であるという宣言をするタグです。このタグ直下にheadタグとbodyタグを記述します。

headタグ

headタグにはそのページの基本情報を入力します。

そのページのタイトルや検索エンジンで表示される際の説明文ディスクリプション、使用するCSSファイルの読み込み先などを記述することができます。

bodyタグ

bodyタグはそのページのコンテンツ部分を記述するページです。

ホームページは上記の様なページの集合体です。

ホームページは上記の様なページを、トップページやコンテンツページ、問い合わせページ等に分けて組み合わせた集合体を指します。

かたまりで整理するブロックレベル

HTMLにはブロックレベルというかたまりのタグがあります。

見出しを指定するhタグや段落を指定するpタグなどをブロックレベルと指します。このブロックレベルの代表的なタグがdivタグです。

divタグは特に意味を持たないブロック要素です。

ではなぜ使うのでしょうか?

divタグで段落や見出しを囲う事で一つのかたまりとして指定することができます。

ひとかたまりにする事でこのブロックの文字の大きさは〇〇などの指定をcssファイルで行います。

 

行内の記述インライン要素

ブロックレベルの他にインライン要素というものがあります。

インライン要素は改行を指定するbrタグやリンクを指定するaタグ、画像を表示させるimgタグ等があります。

実際の記述を見てみよう

それでは実際の記述を見てみましょう。

右側が実際の見え方、左側がHTML言語表記になります。

注目してもらいたいのが、h3タグの下のpタグの記述です。

段落タグであるpタグ(ブロックレベル)でリンクタグであるaタグ(インライン要素)を囲って一つのかたまりとしています。

 

ホームページはブロックの組み合わせ

もっと大きな枠で考えてみましょう。ホームページはブロックの組み合わせで成り立っています。

基本的にはヘッダー、サイドバー、メインコンテンツ、フッターのブロックを組み合わせてページを構成しています。

実際のホームページを例に解説をしていきます。ホームページのブロックの組み合わせには種類があります。

1カラム

弊社のホームページを例に挙げてみました。

ヘッダー部分とメイン部分そして下部にはフッター部分があります。

2カラム

次に2カラムの構成です。

ホームページ制作のコムティブというサイトは2カラムで構成されています。

基本的には各ページのヘッダー、サイド、フッターは固定です。

3カラム

最後に3カラムの構成です。

ロケートスワッグというファッションサイトを例に挙げてみました。

3カラムのホームページ両サイドのサイドバーやヘッダー、フッターは固定でメイン部分は各ページによって変わります。

部分で見れば難しくない

全体でみると難しく感じるかもしれません。

ですが、ヘッダー・フッター・サイドバー・メインを一つ一つ見ていけばさほど難しくありません。

知らないタグはとにかく検索する事がポイントです。

今回の記事の理解ポイントは基本構造ですが、別コンテンツで少しづつタグの解説などをしていきたいと思います。

 

まとめ

いかがでしたでしょうか?今回の記事のポイントを5つにまとめてみました

  • ホームページは基本的にCSSとHTMLで構成されている
  • HTML言語は要素・属性の2つある
  • 終了タグを使わない要素は空要素という
  • ブロックの集合体がホームページ
  • ブロックレベルとインライン要素を理解しよう

いいね!&シェアお願いします!

いかがでしたでしょうか?HTML言語の基本構成はお分かりいただけましたでしょうか?参考になった方は是非いいね!&シェアしてくださいね!

 

関連記事

  1. やみくもに更新しない!ホームページ更新に準備しておくべき3つのモノ

  2. ラインスタンプが完成しました!3丁目のキャト田さん1

  3. カメラ初心者でもできる料理の写真を上手に撮るために意識すること6つ

  4. エラーページTシャツをリリースしました。

  5. 配列のテクニック!アラインメントとは?

  6. なぜホームページを持つの?目的を決めなきゃホームページは意味がない!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA