HTMLとは？意味や基本の書き方、CSSとの違いを初心者向けに解説

HTMLは、プログラミングを行う際に最も基本となるマークアップ言語になります。

そのため、HTMLが分からなければプログラミングを効果的に行うことはできません。

しかし裏を返せば、HTMLを完璧に覚えれば、その後のCSSやJavaScriptといったその他のプログラミング言語を覚える際にも役立ちます。

そこで本記事では、HTMLの概要や覚える際に必要な基本用語、CSSとの関係性を解説します。

また、HTMLを効率的に学習したい方に向けてその学習方法もご紹介しますので、HTMLを学びたい方はぜひ参考にしてください。

HTMLとは

Web制作に携わる人、もしくはこれから携わろうと考えている人であれば、誰もが一度はHTMLという用語を耳にしたことがあるでしょう。

HTMLとは、英語で「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の頭文字を取った略語で、Webページを作るために使われるマークアップ言語です。

マークアップとは「文章構成を定義するという意味の編集用語」で、コンピュータに対してWebページの文章構成を指示するための言語がHTMLです。

HTMLを使うことで、以下のような文章構成が可能になります。

• Webページ内に見出しを配置する
• Webページ内のテキストをどこからどこまで一段落にするか決める
• Webページ内に表や箇条書きリストを挿入する
• Webページの上部／下部にヘッダー／フッターを表示する
• Webページ内やテキストの途中に画像や動画を挿入する
• Webページ内のテキストの色を変える、太字や斜体にする、下線を引くなど装飾する

こういった文章構成をコンピュータに指示することで、その構成がWebページ上に反映されます。

その結果、インターネットユーザーがそのWebページの構造を理解しやすくなります。

HTMLの基本用語

Webページを作るうえで欠かせないHTMLは、Web制作に携わる人のほとんどがまず初めに学習する基本的な言語です。

ここでは、HTMLを理解するうえでとくに重要な「タグ」「要素」「属性」という3つの概念について説明します。

タグ

タグは「文字（テキスト）に意味を付け加えるための目印」のようなものです。

HTMLでは、タグと呼ばれる記号を用いてコンピュータに文章構成を指示します。

HTMLには全部で100種類以上のタグがあり、それぞれのタグを上手く活用することで、より表情豊かなWebページを作ることができます。

HTMLタグは、「<開始タグ>〜</終了タグ>」と表記します。

これにより、開始タグと終了タグに囲まれた部分のテキストに様々な意味を持たせることができます。

終了タグ内では、必ず冒頭に/（スラッシュ）が必要になることに注意しましょう。

このスラッシュを忘れると、Webページの表記が崩れて見栄えが悪くなってしまいます。

以下、HTMLタグの中でもとくに使用頻度の高い代表的なタグをまとめました。

• h：見出しを指定する（見出しの大きさに応じて、h1〜h6までの6段階がある）
• a：リンクを指定する
• p：テキストの段落を指定する
• br：テキストの改行を指定する
• img：画像を挿入する
• button：ボタンを挿入する
• table：表を挿入する
• li：箇条書きリストを作成する（ulタグで囲って使用する）
• strong：文字を太字にする

HTMLタグのアルファベットには、それぞれ意味があります。

例えば、見出しを指定するhは「headline（見出し）」の頭文字で、段落を指定するpは「paragraph（段落）」の頭文字、箇条書きリストを指定するliは「list（リスト）」の頭文字です。

他にも、改行を指定するbrは「break（改行する）」の略、画像を挿入するimgは「image（画像）」の略です。

アルファベットの意味を理解するとタグの役割を覚えやすいのでおすすめです。

要素

<開始タグ>と</終了タグ>で囲まれた文字列を、要素（element）と呼びます。

例えば「<h1>HTMLとは</h1>」と「<p>Hello World!</p>」というHTMLの場合、要素はこの2つに分けられます。

h1タグに囲まれた文字列「HTMLとは」には見出しという意味、pタグに囲まれた文字列「Hello World」には段落という意味が与えられます。

属性

HTMLの要素に属性を追加することで、要素のサイズや配置をより詳しく指示できます。

例えば、「Hello World!という文字列を中央寄せにしたい」という場合、pタグにalignという属性を付与します。

このとき、pタグにalignという属性が付与され、align属性にはcenterという値が指定された、と言えます。

上記のように、タグに属性を付与する場合は、タグ内に半角スペースを開けて属性を記入します。

さらに属性の値を指定するために、属性と値を等号（=）でつなぎ、値を引用符（”）で囲みます。

以下、とくに使用頻度の高い属性をまとめました。

どのHTMLタグとどの属性がセットで使われるのか、セットで理解するのがおすすめです。

• href：Hyper Text Referenceの略。aタグ内で使われ、リンク先のURLを指定する
• src：sourceの略。imgタグ内で使われ、表示させたい画像ファイルのURLを指定する
• align：英語で「整列する」の意。pタグ内で使われ、文字の左寄せ／中央寄せ／右寄せを指定する
• width／height：英語で「幅／高さ」の意。imgタグ内で使われ、画像の幅や高さを指定する

その他、HTMLには様々な属性があります。

興味のある方はぜひご自身で調べてみてください。

HTMLとCSSの関係性

HTMLについて調べたことや学習したことがある人は、「CSS」という用語を聞いたことがあるかもしれません。

CSS（Cascading Style Sheets）もHTMLと同様に、現在世の中で公開されているWebページのほとんど全てに使われている言語です。

HTMLが文章の構造を指定するマークアップ言語であるのに対して、CSSはHTMLが指定した文章にどのような装飾を施すかを決めるデザイン言語です。

CSSを活用することで、具体的に以下のようなことが可能になります。

• 文章の見出しを、吹き出しやリボンなどの形にする
• Webページの背景色にグラデーションを加える
• Webページ内のテキストに、1文字ずつ表示させるようなアニメーションをつける

CSSを使わずに、HTML単体でもWebページを作成することは可能です。

一方、CSS単体ではWebページを作成することはできず、CSSは常にHTMLとセットで使われます。

Webページの文章構成を指定するHTMLと、その文章のデザインを指定するCSSは、Web制作に携わるうえで非常に重要な知識です。

これからHTMLを学習するという方は、ぜひCSSもセットで学ぶことをおすすめします。

HTMLを体験してみよう

HTMLを理解するには、実際にHTMLを体験するのが効果的です。

HTMLは、PC環境さえあれば誰でも簡単に体験できます。

実際に以下の手順に従って、HTMLでWebページを作成してみましょう。

エディタでファイルを作成

まず、お手持ちのPCに標準搭載されているメモ帳（テキストエディタ）を開きます。

次に、この記事で学んだHTMLタグを使って、好きな文章を作ります。

HTMLタグの括弧<>は半角表記であること、終了タグ内には/（スラッシュ）を入れることに注意しましょう。

たとえば見出しを示すh1タグ、段落を示すpタグ、太字を示すstrongタグ、箇条書きを示すulタグとliタグ、改行を示すbrタグなどを組み合わせて記述します。

ブラウザで表示

HTMLを使って文章を書いたら、そのメモファイルを以下の手順で保存します。

1. 保存先は「デスクトップ」を指定する
2. ファイル名を「〜〜〜.html」にする（拡張子が「.html」であればファイル名は何でもOK）
3. ファイルの種類を「すべてのファイル」に設定して保存する（Macの場合は、フォーマット項目で「Webページ(.html)」を選択）

これらの手順でメモを保存すると、PCのデスクトップ上に作成したHTMLファイルが表示されます。

そのファイルをダブルクリックすると、Google ChromeやMicrosoft Edgeなどのブラウザ上に、自分が書いたHTMLが表示されます。

HTMLを身につけるには、自分で実際に書いてみるのが一番の練習になります。

HTMLを学習するなかで新しいタグや属性を学んだら、積極的に使って慣れていくのがおすすめです。

HTMLを効率的に学習したい方へ

これからHTMLを学び始めたいという人は、具体的にどのように学習するのがよいのでしょうか。

ここでは、初心者がHTMLを学ぶうえで知っておきたいポイントを紹介します。

独学よりもプログラミングスクールを推奨

初心者からHTMLを学び始めるのであれば、独学よりもプログラミングスクールに通う方が効果的といえます。

たしかに独学には、スクール費用がかからない、自分のペースで学習できるなどのメリットもあります。

しかし、特に初心者の場合は、専門用語の意味がわからない、文章が思い通りに表示されない原因がわからないなど、自分一人では解決できない問題が多く発生します。

プログラミングスクールであれば、経験豊富なプログラマーから詳しく教わることができるため、初心者でも安心してHTMLを学べます。

マンツーマン式のサポート体制で選ぶ

プログラミングスクール選びに悩んでいる人には、マンツーマン式のレッスンを提供するスクールがおすすめです。

私たち株式会社Young Bushでも、生徒一人ひとりに寄り添う個別サポートを重視しています。

生徒の習熟度や目標に応じてカリキュラムを調整できれば、初心者でも無理なく無駄なく学べます。

加えて、実践的なカリキュラムのなかにポートフォリオの作成が含まれていると、学習効果が高まります。

実際に自分が作ったサービスをポートフォリオとして使えるため、そのまま営業・案件獲得に繋げることが可能です。

まとめ

この記事では、HTMLでできることや、実際にHTMLを書く手順について解説してきました。

HTMLは、Webページを作成するうえで必要不可欠なスキルです。

HTMLが分からなければWebページを作成することはできず、その他のプログラミング言語を覚えようにも、基本が理解できていないため困難と言えます。

そのため、何から始めれば良いのかわからない方ほど、まずはHTMLから学ぶことをおすすめします。

私たち株式会社Young Bushでは、基礎を適切に学べるカリキュラムでHTMLを学習いただけます。

プログラミングを覚えたい方は、当社のサポートもぜひご検討ください。