MENU
これからWEBの仕事で月１００万稼ぐ物語
  1. ホーム
  2. WEB制作
  3. HTML
  4. 【入門編】HTMLの基本を理解しよう

【入門編】HTMLの基本を理解しよう

HTML

WEB制作に憧れて、HTMLの勉強をしたいけど何から始めたらいいのかわからない・・・。

今回はそんな方に必見です

この記事では初心者の方にもわかりやすくHTMLについて説明しますので

気負わずにご覧ください

目次

STEP①:HTMLとは

HyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つで、主にWorld Wide Webにおいて、ウェブページを表現するために用いられる。略してHTMLと呼ばれることが多い。

ウィキペディア

現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。

そのためHTMLとはウェブページを作成するの為には欠かせない言語となります。またHTMLと一緒に解説される事が多いCSSもウェブページを作成するのに必須となってくる言語です

なので、HTML/CSSはWEB制作の登竜門となっています。とはいえ、難しくないので気楽に学んでいきましょう。辛抱強く学習していけば誰でも習得可能です

STEP②：HTMLの全体構造

  1. <!DOCTYPE html>
  2. <html lang=”ja”>
  3. <head>
  4.     <!– charsetの設定 –>
  5.     <meta charset=”UTF-8″>
  6.     <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
  7.     <!– viewport設定 –>
  8.     <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  9.     <!– description設定 –>
  10.     <meta name=”description” content=”サイトの説明をここに記入する”>
  11.     <!– titleタグの記述 –>
  12.     <title>サキトの花</title>
  13.     <!– CSSの読み込み –>
  14.     <link rel=”stylesheet” href=”style.css”>
  15. </head>
  16. <body>
  17.     <!– ここからホームページの内容 –>
  18. </body>
  19. </html>

HTMLはウェブページを作る上で骨組みの役割を果たしており、まずはウェブページ全体の骨組みを作る必要があります。上記が最低限ウェブページに必要なHTMLの記述になります。

ウェブページ全体の骨組みはテンプレ化されていますので、深く考えずに「こういうものなんだ」と思って学習していくだけで十分です。

それでは、上記のコードを分解して順番に解説します。

①：DOCTYPE宣言について

HTMLでまず一番最初に記述するタグはDOCTYPE宣言です。

ではさっそく、index.htmlの1行目に以下のDOCTYPE宣言を記述してください。

  1. <!DOCTYPE html>

DOCTYPE宣言を記述することで、「このファイルはHTMLである」ことをブラウザが認識できるようになります。

②：html要素について

<html>と</html>のタグで囲まれた範囲がhtml要素で、「ここからここまでがHTMLによる記述である」ことを意味します。後述する各種設定やWebサイトに表示したい内容は、すべてこのhtmlタグの中に記述していきます。

  1. <!DOCTYPE html>
  2. <html>
  3. </html>

③：head要素について

headタグの中にはサイトの情報などを書いていきます。直接ブラウザ上には表示されませんが「このサイトはこんな事を書いていますよ！」みたいな事を機械に認識してもらうためのタグです。

これから紹介していく、metaタグ、titleタグ、linkタグはheadタグ内に書く為のものになります。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. </html>

前述のとおり、記述して保存してもhead要素の内容はブラウザに表示されません。

なので何も表示されなくても心配しなくてOKです

④:titleタグについて

ページのタイトルを記載する為のタグになります。重要度はめちゃくちゃ高いタグですので、必ず記載しましょう。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>サキトの花</title>
  5. </head>
  6. </html>

Googleを例に取らせてもらいますと

下記の表示されている部分が変わります

また、下記の画像のようにブラウザのタブにも表示されます。

⑤：metaタグについて

  1. <!–metaタグ –>
  2. <meta ここに情報を記載する>

metaタグはWebサイトの説明文や文字コードの設定、画面の表示設定などができます。ここで代表的な属性を紹介します。

description

metaタグのdescriptionは、Webサイトの説明文を設定します。この説明文はブラウザには表示されず、検索エンジンの検索結果やSNSでシェアされたときに表示されます。

今回もGoogleさんをお借りします

上記の部分ですね。自分のサイトの情報をしっかりと記載しておくことで、ブラウザが自動的に表示してくれるので、忘れず記載しておきましょう。

charset

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. < !–chersetの設定 –>
  5. <meta charset=”utf-8″>
  6. </head>
  7. </html>

上記のコードをそのままheadタグ内に書きます。
「charset」はこのページで使う文字情報を記載しています。

上記では「UTF-8」という文字を入力していますが、これが標準です。「UTF-8」を指定する事で日本語などを文字化けせずに表示できます。

viewport

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. < !–chersetの設定 –>
  5. <meta charset=”utf-8″>
  6. <!– viewport設定 –>
  7. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  8. </head>
  9. </html>

スマホ対応させる為のコードです。

こちらも色々な書き方があるのですが、難しいので覚える必要なし。
上記のがGoogle推奨の記述になりますのでコピペしましょう。

⑥：body要素について

body要素にはブラウザに表示される内容を記述します。

head要素の中に記述された内容はブラウザには表示されませんが、body要素の中に記述された内容はブラウザに直接表示されます。

  1. <!DOCTYPE html>
  2. <html lang=”ja”>
  3. <head>
  4.     <!– charsetの設定 –>
  5.     <meta charset=”UTF-8″>
  6.     <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
  7.     <!– viewport設定 –>
  8.     <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  9.     <!– description設定 –>
  10.     <meta name=”description” content=”サイトの説明をここに記入する”>
  11.     <!– titleタグの記述 –>
  12.     <title>サキトの花</title>
  13.     <!– CSSの読み込み –>
  14.     <link rel=”stylesheet” href=”style.css”>
  15. </head>
  16. <body>
  17.     <!– ここからホームページの内容 –>
  18. </body>
  19. </html>

ここまででサイト構造の作成は完了です。後はbodyタグ内にページの内容を書いていく事でウェブページを作っていきます。

bodyタグは後述するheaderタグやmainタグ、footerタグと組み合わせて記述します。以下のように、ブラウザ上のどこに何を表示させるのかをブロックのように組み立てていきます。

タグ用途
headerロゴやWebサイトのタイトル
mainメインのコンテンツ、見た人に伝えたい内容
footerWebサイトのコピーライトや、ページ内リンクなどの付加情報
headerタグ

headerはWebサイトのヘッダーを作るためのタグです。ヘッダーとは、Webサイトのタイトルやロゴなどを表示する画面上部のエリアのことです。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>サキトの花</title>
  5. <meta charset=”utf-8″>
  6. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  7. </head>
  8. <body>
  9. <header>
  10. <h1>ここに内容を入力</h1>
  11. </header>
  12. </body>
  13. </html>
mainタグ

mainはWebサイトのメインコンテンツ（ニュースや記事など）を作るためのタグです。mainタグの中に、そのWebサイトを見た人に一番伝えたい見出しや段落、画像などを並べていきます。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>サキトの花</title>
  5. <meta charset=”utf-8″>
  6. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  7. </head>
  8. <body>
  9. <header>
  10. <h1>ここに内容を入力</h1>
  11. </header>
  12. <main>
  13. <h2>ここに内容を入力</h2>
  14. <p>ここに内容を入力</p>
  15. </main>
  16. </body>
  17. </html>
footerタグ

footerはWebサイトのフッターを作るためのタグです。フッターとはコピーライト（著作権表示）や他のページへのリンクなど、Webサイトの付加情報を表示する画面下部のエリアのことです。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>サキトの花</title>
  5. <meta charset=”utf-8″>
  6. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  7. </head>
  8. <body>
  9. <header>
  10. <h1>ここに内容を入力</h1>
  11. </header>
  12. <main>
  13. <h2>ここに内容を入力</h2>
  14. <p>ここに内容を入力</p>
  15. </main>
  16. <footer>
  17. Copyright IITENKI inc. All rights reserved.
  18. </footer>
  19. </body>
  20. </html>

まとめ

今回お話しした内容をまとめると

  • DOCTYPE宣言で「このファイルがHTMLである」という情報をブラウザに伝える
  • htmlタグを記述することで、その中身がHTMLであることを示す
  • headタグ内にtitleタグやmetaタグ、charsetタグを記述してタイトルや説明文などを設定する
  • headerタグでタイトルやロゴ、mainタグでメインコンテンツ、footerタグでコピーライトなどを表示するエリアを作る

これであなたもHTMLはWEBページを作る上で大事な骨組みの理解は完璧です

皆さんもパソコンを使ってどんどんトライしていきましょう

骨組みが分かった方はこちらの記事で具体的な書き方の説明をしています

ぜひどうぞ！

あわせて読みたい
【初心者向け】HTMLのタグについてよく使われる5つを紹介 HTMLは大体分かったけどWebページのアウトラインとレイアウトだったりタグなどがまだよくわからないな 今回はそんな方に必見となっております そんなに難しい内容ではな...
HTML
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

sakitoのアバター sakito

バーテンダー→1部上場企業→フリーランス。フリーランスで月収100万円をかなえるために全力で駆け抜けています
実体験をもとに日々のWEB制作の記録を発信していきます
まだまだなのでご指導ご鞭撻のほどよろしくお願いいたします

関連記事

コメント

コメントする

目次