WebデザイナーやWebエンジニアは異業種からの転職先として、とても人気のある職業です。その理由として、IT業界のクリエイターや技術者が人手不足となっており、今後も高い需要が予想されることや、独学で技術を習得しやすく未経験でも就職できることが考えられます。

今回は、WebデザイナーやWebエンジニアを目指す方に向けて、HTMLの基礎をご紹介していきます。
あくまで初歩中の初歩、初心者のための解説となりますので、すでにHTMLに慣れ親しんでいる方には物足りないかもしれませんが、これからWebクリエイターになりたいという方は、ぜひ参考にしてみてください。

HTMLとは？

HTMLとは？

HTMLとは「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の略で、ホームページをブラウザに表示する役割を持っている言語です。
現在も、多くのWebサイトがHTMLで作られているものとなります。

それぞれの単語について説明すると、「HyperText（ハイパーテキスト）」とはクリックすることで、そのWebサイトにアクセスすることができるハイパーリンクを埋め込むことができるテキストのことです。
そして「Markup（マークアップ）」とは、テキストや文字装飾などの情報をコンピューターが正しく認識できるように、タイトルや見出しに「タグ」という目印を使って意味付けをしていくことを指します。

以上をまとめるとHTMLとは、ハイパーテキストを使うことで文字や画像、表を表示する言語となり、Webサイトを作るための基本となります。

まずはHTMLの基本的な構成を知ろう

まずはHTMLの基本的な構成を知ろう

HTMLを構成する際の基礎として、「タグ」「要素」「属性と値」の3つがあります。それぞれについて解説していきますので、覚えておきましょう。

タグ

タグとは、先述の通り情報を認識させるための目印であり、タグを書くときには<>を使います。

その<>の中には、次項で解説する「要素」を入れることでタグが成り立ちますが、使用するときは最初に開始タグ<（要素）>を入れ、最後には/（スラッシュ）を加えた終了タグ</（要素）>を入れます。
なお、例外はありますが、基本的に開始タグと終了タグは2つで1セットです。

この開始タグと終了タグの間に文字列を入れる形が、HTMLの基本構造となります。
たとえば、タイトルを表示したいときには、次のようにtitleタグの間に表示したいタイトルを文字列として入力します。

<title>HTMLにお作法ってあるの！？クリエイターのためのHTML入門</title>

要素

タグの<>の中に入力する「要素」は非常に数が多く、その数は100を超えるとされていますが、その中でも特によく使われる要素をいくつかご紹介します。

h1

Webサイトの見出しを入れる際に使うタグとなり、h1～h6までありますが、スタイルシートで装飾を施した場合を除いてh1がもっとも大きく表示される見出しであり、数の大きさに反して見出しは小さくなります。
一般的な考え方としては、h1が大見出しであれば、h2、h3はh1に続く小見出しになります。

a

リンクを表示する際に使用する要素です。値にはURLを入力しますが、属性には様々なものを指定することで新しいタブで開いたり、リンク先との関連性を検索エンジンに伝えることができます。
初心者の方はとりあえずリンクさせるためのタグ、ということを最初に覚えておいたほうがいいでしょう。

p

このタグで囲まれた文章は一つの段落としてみなされます。テキスト文章を入れるときには必ず必要といっていいほど重要な要素になります。
スタイルシートとclass属性（またはid属性）を用いることで、段落内で使われる文字の大きさや行間を指定することもできます。

br

改行する際に使用しますが、この要素は開始タグを入れるだけで機能します。

img

画像を表示する際に使います。こちらも、上記の改行タグと同様に開始タグのみで機能する要素です。

属性と値

要素は属性を指定することでその特性や状態を表すことができ、属性を追加することによって、さらに詳しい情報を表示できるようになります。

その場合には、要素名の後ろに「属性名」「属性値」を記入することが決まっており、次のように表記します。要素名のあとに、半角スペースを入れることを忘れないようにしましょう。

<要素名 属性=”値”>

たとえば、リンクを表示するaタグを使ってみると、次のようになります。

<a href=”https://～”></a>

https://～の部分にはWebサイトのURL、タグの間にはサイト名を記入します。
こうすることでサイト名がテキストで表示され、クリックするとそのWebサイトへアクセスできるようになるのです。

HTMLにはいくつかの作法がある

HTMLにはいくつかの作法がある

HTMLにはいくつかの決まりごとがあり、このルールを守らないと正しく表示されず、非常にわかりづらいものになってしまいます。

また、HTMLなどの言語は仕事で使用する場合において、自分だけでなく他の人も見るものですので、作法を守ってわかりやすく書く必要があるのです。
初心者がチェックしておきたいHTMLの作法は以下の3つになります。

きちんと入れ子構造にする

HTMLタグは、タグの中にタグを入れるという「入れ子構造」で構成するのが正しい形となるため、開始タグと終了タグの位置に注意しなければなりません。

それぞれのタグがバラバラになってしまうと、うまく表示されなくなってしまいますので、次の正解例のように表記しましょう。

<div>
	<p>
	</p>
</div>

divタグの中に、pタグがセットできちんと入っています。
このように、入れ子構造でタグを書いていくようにしましょう。

開始タグと終了タグをセットで入れる

先の項でも少し紹介しましたが、一部の例外を除き、開始タグと終了タグは2つで1セットとなります。

コードを書き始めの頃によくありがちなミスですが、終了タグのスラッシュ1つをつけ忘れただけでも全体のコードが崩れることになってしまうため、開始タグと終了タグのセットは忘れないようにしましょう。

HTMLタグは必ず半角にする

HTMLタグを書く際は、半角の英数字・記号で書いていくのがルールとなっています。
全角で記入してしまうときちんと表示されないため、必ず半角英数字で記入していきましょう。

インライン要素の中にはブロック要素を入れない

HTMLタグにはインライン要素とブロック要素の2つがあり、インライン要素は文章の中の一部を指定するときに使われます。
一方、ブロック要素はインライン要素などを収納する箱のようなものですので、ブロック要素の中にインライン要素は入れられますが、その逆はできません。
HTMLタグを記入する際には注意しましょう。

クリエイターなら知っておきたいHTMLの基本コード

クリエイターなら知っておきたいHTMLの基本コード

ここではWebデザイナーやWebエンジニアなら知っておきたい、Webサイトを作るうえで最低限必要なHTMLの基本コードをご紹介していきます。

hタグで見出しを作る

先述の通り、hタグは見出しを作るタグです。
h1～h6までありますが、基本的にh1タグは1つのページに1つと決まっています。
そのため、頻繁に使われる大きな見出しはh2からとなるのです。

フォントサイズ変更タグで文字サイズの変更

<font size=”数字”>文字列</font>というタグで、文字列のフォントサイズを変更することができます。数字の部分には1～7までを入れることができ、この数字を変更することで文字の大きさが変わります。
なお、文字のサイズが変更できるためhタグと混同してしまうかもしれませんが、hタグは見出しのみに使用するものです。上記のタグは、本文のフォントサイズを変更するときに使用しましょう。
ただしWebサイト制作のプロとして考えた場合、フォントサイズの変更などはスタイルシート上で行うことが一般的です。まずはHTMLに慣れ親しむという範囲で使うことを念頭に置きましょう。

フォントカラー変更タグで文字色の変更

<font color=”red”>文字列</font>というタグで、フォントの色を変更できます。
色については「red」「blue」といった書き方もできますが、#◯◯◯◯◯◯という6桁のコードを使うことで、よりさまざまな色の表現ができます。

HTMLを効率よく勉強する方法

初めてHTMLを勉強するとなると、どのように勉強を始めたらいいのか迷ってしまうことでしょう。

まずは、初心者向けの本を購入し、知識をつけながら実際に手を動かしてみることがとても大切です。知識をつけながら1つのWebサイトを作ることで、自分のポートフォリオとしても使うことができます。ポートフォリオがあれば、就職活動の際にアピール材料にもなるのでおすすめです。
また、最近ではオンラインでプログラミングなどの教育を行っている方もいますので、わからないことをそのままにせず、そういった方に相談してみましょう。

初心者にありがちな失敗として、参考書をたくさん買ってしまうことなどがありますが、勉強法が多いと逆にわかりづらくなるため、まずは初心者向けのわかりやすい参考書を1冊買うようにしましょう。

まとめ

今回はHTMLについて、初心者にもわかりやすくご紹介しました。WebデザイナーやWebエンジニアになりたい人にはまず押さえてほしい基礎となりますので、今回ご紹介した勉強法などを行ってスキルを身につけていただければと思います。