HTML入門講座（初心者向け） Web制作の基礎を学ぼう

Webサイトを制作するために必要になるのがHTML。こちらでは、これからHTMLを学ぼうと思っている初心者向けに、HTMLの特徴や基本構造、実際によく使うタグの説明などを行い、最後に入門講座の問題集にチャレンジしてもらいたいと思います。

HTMLとは
HTMLの開発環境
HTMLの基本構造
HTMLでよく使うタグ
HTML入門講座（12問）
HTMLの基礎が身についたら
まとめ

1.HTMLとは

HTMLとは、「HyperText Markup Language」の略で、Webサイトを制作する際に使用されるマークアップ言語の一つです。マークアップ言語といわれても良く分からないという方のために、こちらではHTMLに関して詳しく解説をしていきます。最後にHTML入門講座の問題（無料）も用意しているので是非挑戦してみて下さい。

HTMLの特徴と役割

Webサイトは、Webデザインしたものをコーディングすることによって完成させます。HTMLはコーディングの際に使用されるもので、これをマークアップ言語といいます。皆さんがインターネット上で見ているWebサイトは基本的にHTMLを使用しハイパーリンクやマークアップを使用して作られています。HTMLは初学者の方でも比較的覚えやすい言語ですので一つ一つ学習をしていきましょう。

これからWebデザインを学ぶ方は、Webデザインコースをご覧ください！

ハイパーテキスト（リンク）

ハイパーテキストは、ページ内のリンクをクリックすることで他のページに移動する仕組みです。例えば、「未経験からでも1週間でHTMLをマスターできる」といったリンクをクリックすると、そのリンク先のページに遷移します。これが、ハイパーテキストの役割であり、ユーザーが簡単に他の情報にアクセスできるようにする重要な要素です。

マークアップ

Webサイトを見ると、文章の見出しが大文字や太文字になっている事があります。この記事も上記の「マークアップ」の文字が大文字、太文字になっていますよね。この様にタイトルや見出しなどを設定する際に用いられるのが「タグ」です。例えば

<h1>マークアップ</h1>

と記述すると見出しとしてマークアップという文字が太字で表示されます。このように文書構造や視覚表現などの情報をコンピューターが正しく認識できるようにするコードをマークアップといいます。

＼HTMLについてもっと詳しく知りたい方必見！／

これからWEB制作を学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

2.HTMLの開発環境

HTMLやCSSでWebサイトを制作する際に必要なものは、テキストエディタというツールとインターネットが繋がったパソコン（ブラウザが必要）が必要となります。この2つがあればWebサイトが制作できます。こちらでは、テキストエディタとブラウザについて解説していきます。

テキストエディタ

これからWebデザインを学ぶ方は、Webデザインコースをご覧ください！

ブラウザ

スマートフォンの普及に伴いブラウザというワードを聞く事が多くなりました。でも「ブラウザって何？」と聞かれると答えられる方は多くないかもしれません。ある調査ではブラウザについて説明ができると回答したのは総数の約50％というデータもあります。それでは、ブラウザとは何なのか。

ブラウザとはインターネットでWebサイトなどを閲覧するために使われるソフトの事を言います。パソコンやスマートフォンにはMicrosoft Edgeやsafariが最初から入っていたり、Google Cromeも多くの方に使われているブラウザですね。ブラウザごとにブックマークや拡張機能などが異なりますので、使いやすいブラウザを選びましょう。

＼HTMLについてもっと詳しく知りたい方必見！／

これからWEB制作を学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

HTMLの基本構造

Webサイトを制作する際は、HTMLを正しく（ルールに従って）記述する必要があります。HTMLの構造は、まず文書がHTMLで作成されたものであることを宣言するために使われるDOCTYPEを記述し、その下にHTML宣言から始まりHTMLタグで終わります。こちらでは分かりやすい様に画像なども用いて解説をします。

DOCTYPE

WebサイトがHTML5で作成されたものである事を宣言するために、サイトのトップ（一番上）に下の図の様なタグを記述します。こちらはHTMLタグではありませんが、一番最初に記述する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

HTMLタグ

HTMLタグは、その文書がHTMLで作成されている事を宣言し、サイト制作の際は、上記のDOCTYPEの次にHTMLの宣言をしなければなりません。Webサイトを制作する際は、HTMLを宣言し、最後にHTMLタグで終わる、と覚えておきましょう。下の図を見て頂くと分かりますが、HTMLタグの中に記述しているlangはHTMLがどの国の言葉に対応しているのかについて書きます。すなわち日本語の場合はjaと記述することで、このWebサイトは日本語に対応したHTMLファイルであることを表します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

headタグ

headタグは、Google等の検索エンジンに伝える情報や、利用するファイルなどを記述する際に使用します。例えば、このページのタイトルが「HTML入門者向け情報サイト」だったとします。執筆している私は、このページをできるだけ多くの方に見てもらいたいわけですが、そのためにはGoogle検索などを行った際に検索結果のページに表示されていなければなりません。Googleの検索エンジンに、このページはHTML入門者向けページですよ、教えてあげなければなりませんのでその際に、このheadタグを用います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

metaタグ

metaタグはWebサイトを制作する際に文書の情報を記述するタグの役割があります。具体的には、下の図の様に属性にcharsetを記述し、使用する文字コードを決めます。初心者の方はとりあえず「UTF-8」に設定をしておいてください。また、ディスクリプションといってページの内容を簡潔にまとめたものを設定する際にもmetaタグが使われます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

titleタグ

Webサイトを制作する目的は、「その情報を必要とする人に見てもらうこと」です。そのためにはGoogleやYahooなどの検索エンジンでの検索結果に、分かりやすくタイトルを表示させなければなりません。そこで使われるのがtitleタグです。下の様に、

<title>から始まり</title>

から始まり</title>で締めくくりますが、その間にサイトのタイトルを記入します。ここで記入された文字が検索結果一覧にも表示されますので、SEO対策としても非常に重要な役割があります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

bodyタグ

bodyタグは実際にユーザーに見える情報を記述する際に使います。このページでheadタグを説明しましたが、headタグはユーザーに見える情報ではなく検索エンジンに伝えたい情報や利用するファイルなどを記述する際に使います。

<body>で始まり</body>

で締めくくる部分に関してはインターネット上に公開されるので、サイトの設定などユーザーに見せる目的でないものは記述しないようにしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

HTMLについてもっと詳しく知りたい方は、無料問題集をご覧ください！

HTMLでよく使うタグ

こちらではHTMLでよく使うタグを紹介したいと思います。HTMLの基本構造にて説明をしたbodyタグの中に記述するタグとなり、SEO効果があるものもあるのでしっかりと覚えましょう。

pタグ

pタグはWebサイト上のテキストを見やすくする際に使われるタグで、具体的には

<p>・・・</p>

の様にpタグで挟んだ文字が、その段落として画面上に表示されます。皆さんがいつも目にしている記事に関しても段落が付いていると、文章のまとまりが出て分かりやすく読みやすいですよね。それはWeb制作においても同じことと考えてもらえれば分かりやすいかもしれません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>忍者CODEです</title>
</head>
<body>
<p>初心者に分かりやすく説明します！</p>
</body>
</html>

これからWeb制作を学ぶ方は、Web制作コースをご覧ください！

brタグ

brタグは「改行」をする際に使われるもので、pタグとの使い分けが少し分かりにくいですが、以下の様に覚えてもらうと良いと思います。

pタグは「段落」を表す際に使用し、伝えたいことに区切りをつけて表示する事

brタグは「改行」をする際に使用し、文章を読みやすくするために使われる

Webサイトを制作する際は、できる限りpタグの使用をおすすめしています。理由はSEOの内部対策になるのですが、Googleの検索エンジンなどはクローラーと呼ばれる情報を探すロボットの様なものがサイトを巡回していて情報を集めています。
Webサイトを制作する際は、このクローラーに正確な情報を早く見つけてもらうことが必要となります。そのためにはbrタグよりもpタグを利用した方が良いとされています。

h1～h6タグ

hタグとは、Webサイトに見出しを示す際に使用するHTMLタグです。「h」はheadingの略で見出しという意味を持っています。hタグは、h1～h6まであります。
このhタグはSEOの内部対策としても非常に重要な役割を持っており、ページのタイトルはh1タグを使用します。例えば、「HTML入門者向け情報」というページがあったとすると、そのページタイトルをh1とし、HTML入門者向けに届けたい情報の見出しをh2とします。さらに、h2タグで設定したコンテンツの詳細説明をする場合、h3を使用するという流れになります。このように、hタグの中に次の数字の大きいhタグを設定することがルールとなります。

実際にWebサイトを開いて、Ctrl+uでそのページのコードを見る事ができますので一度確認してみると分かりやすいです。

imgタグ

Webサイトを作成する際は、そのサイトを見る人にとって見やすく、そして分かりやすく作成する必要があります。そこで、よく使われるのが画像。Webサイトはテキストだけでなく、そのテキストを画像で表すことによって非常に分かりやすくなりますよね。HTMLでは画像ファイルを表示する際にimgタグを使用します。imgタグは、表示させたいファイル名、また画像の大きさ、そしてalt属性の設定などを行います。altの設定はHTML5で必須ではなくなりましたが、設定されている事が多いので覚えておきましょう。

aタグ

aタグとは、「Anchor（アンカー）」の略で、リンクを設置する際に使われるHTMLです。aタグを使いリンク先のURLを設定します。aタグは、主に二つの方法にて用いられることが多く、同画面にてリンク先を飛ばす場合と、別画面にてリンク先を飛ばす場合があり、それぞれ記述するコードが異なります。

HTML入門講座（12問）

HTMLの基礎が身についたら

HTMLの基礎が身に付いたら次はCSSの入門にも目を通しておきましょう!

CSSとは、HTMLを装飾するために用意されたスタイルシート言語です。この入門講座で学習したタグを指定して、様々な装飾（デザイン）を行なうことができます。

CSSの学習も終えたら一旦HTMLとCSSを使った模写コーディングを行なうことがおすすめです。まずは以下のリンクからCSS入門講座を確認してみましょう!

CSS入門講座へ進む

まとめ

こちらではWebサイトを制作する際に必須となるHTMLについて、基本構造やタグの使い方について解説をしました。HTMLは、これからWeb制作を始めようとする初心者の方でも分かりやすく、一つひとつ勉強すれば必ず身についていきます。忍者CODEではHTML入門講座から上級コースまで問題集を揃えておりますので、学習に役立てて頂ければと思います。

これからWeb制作を学ぶ方は、Web制作コースをご覧ください！

プログラミング入門講座へ戻る