【プログラミング初心者必見】今さら聞けない！HTML とは？基礎知識から使い方まで徹底解説
生徒ペン博士！最近プログラミングに興味があるのですが、そもそも「HTML」って何なのかよくわかりません。
ペン博士HTMLはWebページの骨組みを作る基本中の基本の言語じゃ！
今から詳しく解説するからよーく聞くんじゃぞ！
生徒はい！お願いします！
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【転職希望者必見】受託開発の会社に内定！フルスタックエンジニアとして更なる高みを目指し挑戦中！
ペン博士！今回はどんな方がインタビューに応じてくださったんですか？ うむ。今回は受託開発の会社に内定をもらった方じゃぞ！しかもフルスタックエンジニアとしての採…
吉池さんの主な制作実績はこちら
目次
HTMLとは？
HTML（Hyper Text Markup Language）は、Webページを作成するために作られたマークアップ言語です。マークアップ言語とは、Webページ内のテキスト情報の構成や役割をコンピュータに構造的に理解させるものです。HTMLはWebブラウザに対して、Webページの構造や表示方法を指示するために使用されます。今現在Web上で公開されているほとんどのWebサイトでHTMLが使用されています。
HTMLの役割
HTMLはWebページの構造を定義する役割を持っています。具体的には、見出し、段落、リンク、画像などの要素を配置し、それらの要素を表示するようにブラウザに指示をします。
また、文章の意味や構造をコンピュータに伝えるための役割も果たし、検索エンジンなどがWebページの中身や関連性を理解しやすくなるのでプログラミング学習には必要不可欠です。
ペン博士HTMLは他の技術と組み合わせてWebページを構築するための基礎となる言語で、CSS（Cascading Style Sheets）やJavaScriptと組み合わせて使用することで、より洗練されたデザインや動的な機能を実現できるぞ！
HTMLとCSSの違い
HTMLとCSSは、Webページの作成において役割が異なります。簡単に言うとHTMLは文章の構造を作るものです。Webページの構造やコンテンツを定義するための言語であり、タグを使用して要素やコンテンツの役割を指定します。
一方、CSSはWebページのスタイルやデザインを指示するための言語です。CSSはHTMLに対してスタイルのルールやデザインの指示を行い、要素のレイアウトや色、フォントを指定できます。
ペン博士HTMLとCSSは互いに連携し合い、Webページの構造とデザインを分離して管理することで、より柔軟で効率的なWebページの作成が可能じゃ！
タグの種類と使い方
ペン博士ここでは、タグについて詳しく解説するぞ！
タグとは
HTMLでは、要素やコンテンツを示すためにタグという印を使用します。タグとは簡単に説明すると文字に役割を与えてくれる存在であり、タグによってコンピュータはテキスト情報を表示する形を認識できる非常に重要な部分です。タグは<要素名>の形式で記述され、開始タグと終了タグのペアで表示されます。開始タグは要素の始まりを、終了タグは要素の終わりを示します。
またタグにはさまざまな種類があり、それぞれの役割や構造を表現するために使用され、タグはネスト（入れ子）することもでき、複数の要素を包含することができるので覚えておきましょう。
タグの書き方のルール
HTMLでは、さまざまなタグを使って要素を表現します。ここでは、いくつかの基本的なタグの書き方について説明します。
まず、HTMLの書き始めは<html>タグから始めます。この<html>タグで、HTMLの文書であることを宣言します。<head>タグ内にはページのタイトルやメタ情報などを記述します。<body>タグ内には実際のコンテンツを記述します。
例えば、以下のようなHTMLタグを使って「WithCode」と表示するページを作成することができます。
<!DOCTYPE html>
<html>
<head>
<title>WithCode</title>
</head>
<body>
<h1>WithCode</h1>
</body>
</html>上記のコードでは、<h1>タグを使って「WithCode」という見出しを作成しています。このタグは大見出しを表すタグであり、ページの題名などに使用されます。その他にも、<p>タグを使うことで段落を表現したり、<img>タグを使うことで画像を表示したりすることができます。
またHTMLでは、様々なタグを使用してWebページの構造やコンテンツを表現します。ここでは、HTMLでよく使われる重要なタグについて説明します。
主なタグ一覧
よく使用される主なタグの一覧になります。
- pタグ：段落を表すタグです。テキストをまとめて表示する際に使用します。
- h1~h6タグ：見出しを表すタグです。見出しのレベルに応じてタグの種類を選びます。
- aタグ：リンクを作成するためのタグです。他のWebページや文書へのリンクを設定することができます。
- imgタグ：画像を表示するためのタグです。画像のファイルパスやサイズ、代替テキストを指定します。
- ulタグ：順序のないリスト（箇条書き）を作成するためのタグです。リストアイテムは<li>タグで表現します。
またタグを使用する際は、いくつかのルールがあります。
タグは<タグ名>と</タグ名>で囲む形式で使用します。</タグ名>が終了を意味します。
タグには属性を付けることができ、属性は属性名=”値”の形式で指定します。
<a href="https://example.com">例外的に一部のタグには終了タグが不要な場合があります。例えば、<br>タグは改行を表現し、終了タグの必要がありません。
タグの用例とサンプルコード
以下に、タグの使用例とそれに対応するサンプルコードを示します。
例えば「WithCode」というテキストを段落として表示したい場合、<p>タグを使用します。
<p>WithCode</p>また、例えば、リンクを作成する場合には<a>タグを使用します。以下はGoogleのホームページへのリンクのコード例です。
<a href="https://www.google.com">Google</a>上記のコードは、「Google」というテキストがリンクになり、クリックすると「https://www.google.com」に遷移します。
HTMLでホームページを作成する手順
ペン博士続いて、HTMLでホームページを作成する手順を解説するぞ！
ツールを用意する
ホームページを作成するには、まず基本的なツールを準備する必要があります。主に必要なのは 「テキストエディタ」と「Webブラウザ」 の2つです。
テキストエディタ
- HTMLなどのコードを書くためのソフトウェア
- 例：メモ帳（Windows）、テキストエディット（Mac）、Visual Studio Code、Atom など
- WindowsやMacに標準搭載されているものでもOK
Webブラウザ
- 書いたHTMLコードを実際に画面に表示するソフトウェア
- 例：Google Chrome、Mozilla Firefox、Microsoft Edge など
この2つのツールを用意することで、HTMLを使ったホームページ作成の準備が完了です。
テキストエディタにHTMLを書く
ツールが用意できたら、次にHTMLを書き始めましょう。
1. テキストエディタを開く
HTMLコードを入力するためのエディタを立ち上げます。
2. HTMLの基本構造を理解する
HTMLは以下のような構成で書きます：
<!DOCTYPE html>
<html>
<head>
<!-- ヘッダー情報（タイトルなど） -->
</head>
<body>
<!-- ページに表示される内容 -->
</body>
</html>3. 必要なタグを記述する
目的に応じてタグを使い分けましょう：
<h1>〜<h6>：見出し（数字が小さいほど大きな見出し）<p>：段落（文章を区切る）
4. ファイルを保存する
ファイル名の末尾に .html を付けて保存（例：index.html）
5. ブラウザで開く
保存したHTMLファイルをWebブラウザで開くと、書いた内容が表示されます。
6. 見た目や動作を確認・修正
表示結果を見ながらコードを調整して、理想のページに近づけていきましょう。
以上が、HTMLでホームページを作成する手順です。テキストエディタにHTMLを書いて、Webブラウザで表示するという作業を繰り返すことで、ご自身だけのオリジナルなホームページを作成することができます。
生徒ペン博士、HTMLって難しそうに感じてたけど、タグの意味や使い方がわかるとちょっと楽しくなってきました！
ペン博士うむ、それで良いのじゃ。HTMLはWeb制作の土台。しっかりとした基礎が、後々CSSやJavaScriptを学ぶ時にも大きな力になるぞい。
生徒今日学んだことを忘れないうちに、実際に簡単なWebページを作ってみます！ありがとうございました！
まとめ
今回は、HTMLの基礎知識から活用方法まで解説しました。冒頭でも触れましたが、HTMLは、数多くのWebサイトで使われており、Webサイトの制作に必須なスキルです。
また、HTMLはタグでテキストを囲むだけで簡単にコーディングができることから、習得難易度も低く、初心者の方でも習得しやすいです。
WithCodeでは、Web制作を中心に「稼げる人材」へのサポートを強みとしています。相談しながら学習する言語を決めたい、挫折せずに学習したい、最短で結果を出したいという方はぜひお気軽にお問い合わせフォームより無料相談をお申込みください。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
