スキル

【初心者の方向け】HTMLの基本的な書き方のご紹介

ウェブサイトの基礎言語である「HTML」。

このHTMLの知識があれば、ウェブサイトを自由に作成できるようになります。

しかし、HTMLには専門用語や難解なコードが多いので、初心者の方にとってはHTMLを学ぶのはハードルが高く感じられるでしょう。

そこで今回は、初心者の方でもよくわかるHTMLの基礎知識とその書き方についてご紹介します。ぜひ参考にしてくださいね。

HTMLの基礎を学ぼう

まずは、「HTMLとは何か」を理解するために、その基礎知識についてくわしく解説しましょう。

HTMLとは?

HTMLとは、ウェブサイトを作成する時に使用するプログラミング言語です。

人間が使用する言語でウェブサイトを作成しても、コンピューターには全く理解できません。そのため、プログラミング言語であるHTMLを使用して、「ここがタイトル」「ここが画像」のように、サイト上の情報をわかりやすくコンピューターに伝える必要があるのです。

つまりHTMLとは、私たちとコンピューターをつなぐ「共通言語」のようなものなのです。

HTMLは、「タグ:< >」と呼ばれるマークをつけて、主に文書に対する情報をコンピューターに伝えます。

たとえば、「HTMLとは?」という文書を「タイトル」としてコンピューターに伝えたい場合は、タイトルを表すタグ<title></title>で以下のように囲みます。

<title> HTMLとは?</title>

これにより、コンピューターがこの文書がタイトルであることを理解し、ウェブ上に表示することができるようになるのです。

HTMLは文書以外にも、リンクや表、画像などの内容も伝えることができます。

実際にHTMLを見てみよう

それでは実際にHTMLを表示して、その内容を確かめてみましょう。

今回はGoogleのホーム画面のHTMLを表示します。手順は以下の通りです。

1.Googleのホーム画面の空欄部分を右クリックする
2.表示された画面の中の「ページのソースを表示」を選択する(Google Chromeを利用している場合)

すると、タグで囲まれたさまざま記号や文字がズラリと出てきます。

この文字列を「ソースコード」と言います。

これがGoogleのホーム画面のHTMLであり、コンピューターはこのソースコードを読み取り、ウェブサイト上に表示しているのです。

CSSとは?

CSSはHTMLと同じプログラミング言語ですが、HTMLが主に文書に関する情報を表すのに対し、CSSは文字の色やサイズ、背景のデザイン、サイト全体のレイアウトなど、サイトの「スタイル」に関する情報を表示します。

HTMLだけを使ったウェブサイトは文書中心なので、どうしても味気ないものになりがちです。そこでCSSを加えることで、わかりやすく華やかなページを作ることができるのです。そのため、HTMLとCSSは常にセットで使用されています。

その他のプログラミング言語のご紹介

HTMLやCSSの他にも、ウェブサイトを作成する際に使用されるプログラミング言語は数多くあります。いくつかご紹介しましょう。

JavaScript(ジャバスクリプト)

HTMLやCSS以外のプログラミング言語と言えば、「JavaScript」が代表的です。

JavaScriptは、ウェブサイトやアプリに「動的な操作」を伝える言語です。画像のスライドショーやアニメーションなど、ブラウザ上でウェブページの内容をダイナミックに表示することができます。

汎用性が高く、さまざまな場面で役立つ便利なプログラミング言語なので、工夫次第で魅力的なウェブサイトを作成することができます。

Python(パイソン)/Ruby(ルビー)

JavaScriptの他にも、Python(パイソン)やRuby(ルビー)といったプログラミング言語もあります。

【Python(パイソン)】
Pythonは、ウェブアプリ開発などでも使用されているプログラミング言語です。コードがシンプルで使いやすく、一行で多くの処理を記述できるため、初心者の方にもおすすめです。

【Ruby(ルビー)】
Rubyは、コードの記述量が少なく、直感的に内容を理解することができるプログラミング言語です。そのため、初心者の方でもスムーズに学ぶことができますよ。クックパッドや食べログなどの大型サイトのサービスにも使用されています。

HTMLを習得するメリットとは?

HTMLを習得すると、どのようなメリットがあるのでしょうか?くわしく解説します。

プログラミング言語の習得に役立つ

プログラムをブラウザに表示させるときには、HTMLがよく使用されます。そのためHTMLは、将来的にプログラミングを学びたいと考えている方の入門言語として最適です。

ウェブの仕組みがわかる

現在閲覧できるウェブサイトのほとんどはHTMLによって作られています。そのため、HTMLの知識があれば、ウェブサイトの全体的な仕組みが理解できるようになります。

サイトを自作できる

HTMLの知識があればウェブサイトの全体的な仕組みが把握できるので、簡単な内容のウェブサイトであれば制作ソフトがなくても自作できるようになります。

さらに、HTMLを使ってウェブサイトの無料テンプレートを自分なりにアレンジすれば、コストをかけずにオリジナリティあふれるサイトを作ることも簡単です。

HTMLを書くために必要なものとは?

HTMLを書くためには、「テキストエディタ」と「ブラウザ」という2種類のアイテムが必要です。

テキストエディタ

テキストエディタとは、文書ファイルの編集・作成を行うソフトであり、HTMLを書きこむ専門の「ノート」のようなものです。種類も豊富で、それぞれデザインや機能、対応OSなどが異なります。

初心者のうちはパソコンに標準装備されているテキストエディタ(Windowsであれば「メモ帳」)で十分ですが、もっとさまざまな機能が搭載されたテキストエディタをお探しなら、「Sublime Text(サブライムテキスト)」と「Atom(アトム)」がおすすめです。

この2種類は無料ソフトとは思えないほど機能やデザイン性に優れているだけでなく、導入方法や使い方も比較的シンプルなので、操作でつまずくことはまずないでしょう。

参考:Sublime Text(サブライムテキスト)

参考:Atom(アトム)

ブラウザ

ブラウザとは、ウェブサイトを閲覧するためのソフトです。ほとんどのパソコンやスマホには、最初からこのブラウザが搭載されています。代表的なブラウザとしては、Google ChromeやInternet Explorerがあります。

今ご覧になっているこのページも、ブラウザによって表示されているんですよ。

HTMLの「タグ」の種類とは?

HTMLは、タグによって構成されるプログラミング言語(厳密には「マークアップ言語」)です。

タグで文字を囲むことによってテキスト(文書)に意味を与え、コンピューターに情報を伝えているのです。

そこでこのタグの種類とその意味について、くわしくご紹介します。

HTMLのタグの種類と意味

タグは「開始タグ」と「終了タグ」で構成されます。開始タグは<>、終了タグは</>で表示します。

たとえば、「HTMLを学習しよう」というテキストを大見出しとして表示したい場合、大見出しタグの“<h1></h1>”で文書を囲みます。

<h1> HTMLを学習しよう</h1>

これにより、このテキストが大見出しとしてブラウザ上に表示されるのです。

この他にも、タグにはさまざまな種類があります。代表的な種類は以下の通りです。

<html></html>…HTML文書の範囲
<h1></h1>(エイチワンタグ)…大見出しを作成
<p></p>(パラグラフタグ)…段落を作成
<table></table>(テーブルタグ)…表を作成
<strong></strong>(ストロングタグ)…文字を強調
<li></li>(リストタグ)…箇条書きを記載

HTMLの構造

次に、HTMLの構造を解説します。HTMLの基本構造は以下の通りです。

1. DOCTYPE宣言
2. html要素
3. head要素
4. body要素
5. (補足) header/footer/id属性/class属性

それぞれくわしくご紹介しましょう。

DOCTYPE宣言

DOCTYPE宣言とは、その文書のHTMLのバージョンを示す情報です。

例:「HTML5」の場合の記述…<!DOCTYPE html>

html 要素

html 要素とは、<html>タグで囲むことによって、この文書がHTMLの文書であることを表します

また、HTMLの文書が日本語である場合、

<html lang=ja></html>

のように表します。

head要素

head要素とは、ウェブサイトに関する情報のことです。たとえば、文字コードやタイトル、SEO検索向けの説明文、使用するコンピューター言語(CSS、JavaScript)などが記入されます。

<meta charset>…文字コード
一般的に、世界的な標準規格「UTF-8」が使用される

<title>…ウェブサイトのタイトル

<meta name="description">…ウェブサイトの紹介文
Googleなどの検索結果ページに表示される

これらhead要素に記述された内容は、タイトル以外は基本的にブラウザ上に表示されません

body要素

body要素はその文書の本文であり、見出し、文書、画像、テーブルなどのコンテンツを記入します。これらの内容は実際にブラウザ上に表示されます。

(補足) header/footer/id属性/class属性

上記以外にも、補足的な役割を担う要素もあります。それぞれご紹介しましょう。

【header/footer】
HTMLの主流バージョンである「HTML5」には、body要素をさらに細かく意味付けするタグがあります。それが「header(ヘッダー)」と「footer(フッター)」です。

<header>(ヘッダー)
headerは、主にサイトのロゴや、ナビゲーションメニュー(各ページへのリンク)などを表示します。先ほど解説した「head(ヘッド)要素」と名前が似ていますが、全く別物ですので注意しましょう。

<footer>(フッター)
footerは、ウェブサイトの著者名連絡先などを表示します。多くの場合、サイトの末尾に記述されています。

その他にも、各ページ共通の内容を表示する「sidebar(サイドバー)」と呼ばれる要素もあります。

headerやfooter、sidebarなどはあくまで補足的な意味付けであり、必須の要素ではありません。記述の際の厳密なルールもないので、ご自分の好みで使用することができます。

【id属性/class属性】
CSSを書く時によく使われるのが、「id」と「class」という属性です。属性とは、タグの情報をよりくわしく説明するものです。

これらを使用することで、CSSによる装飾をより細かく設定することができます。

HTMLを記述してみよう!

それでは、今までご紹介したタグを使用して、HTMLを実際に記述してみましょう。

<!DOCTYPE html>
<html>

<head>

<meta charset=utf-8>

<title>タイトル</title>

</head>

<body>

<header>
<h1>サイトの名前</h1>
</header>

<h1>コンテンツの見出し</h1>
<p>内容</p>
               
<footer>
サイトの著者名
</footer>

</body>

</html>

いかがでしたか?今回は簡単な内容ですが、HTMLの知識をさらに身につければ、内容豊かなWebページを作成できるようになりますよ。

HTMLの知識があれば、自分でウェブサイトを作成できる!

今回は、HTMLの基礎知識や書き方をご紹介しましたが、いかがでしたか?

HTMLの知識があればウェブサイトの仕組みが把握できるので、簡単なウェブサイトならすぐに自作できるようになるでしょう。

また、CSSやJavaScriptなどの他のプログラミング言語も利用すれば、より魅力的なウェブサイトを作ることもできますよ。

今回ご紹介したHTMLの知識がみなさんのウェブサイト作成のお役に立てれば幸いです。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
などアクシグ代表の吉田が、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。