HTML とは？基礎知識から使い方まで徹底解説
目次
HTMLとは？
HTML（Hyper Text Markup Language）は、Webページを作成するために作られたマークアップ言語です。マークアップ言語とは、Webページ内のテキスト情報の構成や役割をコンピュータに構造的に理解させる言語です。HTMLはWebブラウザに対して、Webページの構造や表示方法を指示するために使用されます。今現在Web上で公開されているほとんどのWebサイトでHTMLが使用されています。
HTMLの役割
HTMLはWebページの構造を定義する役割を持っています。具体的には、見出し、段落、リンク、画像などの要素を配置し、それらの要素を視覚的に表示する方法をブラウザに指示します。
また、HTMLは文章の意味や構造をコンピュータに伝えるための役割も果たします。これにより、検索エンジンなどが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でホームページを作成する手順を説明します。
ツールを用意する
ホームページを作成するためにはまず、必要なツールを用意する必要があります。
まず、テキストエディタと呼ばれるソフトウェアが必要です。テキストエディタはHTMLのコードを書くためのソフトウェアであり、WindowsやMacなどのオペレーティングシステムに標準で搭載されているテキストエディタを使用することもできます。
さらに、Webブラウザも必要です。WebブラウザはHTMLのコードを実際に表示するためのソフトウェアであり、一般的なWebブラウザとしてはGoogle ChromeやMozilla Firefox、Microsoft Edgeなどがあります。
これらのツールを用意することで、HTMLでホームページを作成する準備が整います。
テキストエディタにHTMLを書く
ツールが用意できたら、次にHTMLを書き始めましょう。
まず、テキストエディタを開きます。テキストエディタには一般的なテキスト入力機能が備わっており、HTMLのコードを打ち込むことができます。
HTMLでホームページを作成するには、まずHTMLの基本的な構造を理解する必要があります。HTMLの構造は、<!DOCTYPE html>という宣言から始まり、<html>タグで囲まれた要素が続き、<head>タグと<body>タグに分かれています。
作成したいホームページの内容に合わせて、必要なタグや要素をテキストエディタ上で記述します。例えば、見出しを表示させたい場合は<h1>タグや<h2>タグを使用しますし、段落を表示させたい場合は<p>タグを使用します。
HTMLのコードを記述したら、ファイルを保存します。拡張子は「.html」になるようにしましょう。
保存したHTMLファイルをWebブラウザで開くと、テキストエディタ上で記述したコードが実際に表示されます。自分が作成したホームページの見た目や動作を確認しながら、必要な修正や調整を行いましょう。
以上が、HTMLでホームページを作成する手順です。テキストエディタにHTMLを書いて、Webブラウザで表示するという作業を繰り返すことで、自分だけのオリジナルなホームページを作成することができます。
まとめ
今回は、HTMLの基礎知識から活用方法まで解説しました。冒頭でも触れましたが、HTMLは、数多くのWebサイトで使われており、Webサイトの制作に必須なスキルです。
また、HTMLはタグでテキストを囲むだけで簡単にコーディングができることから、習得難易度も低く、初心者の方でも習得しやすいです。
WithCodeでは、Web制作を中心に「稼げる人材」へのサポートを強みとしています。相談しながら学習する言語を決めたい、挫折せずに学習したい、最短でお金を稼ぎたいという方はぜひお気軽にお問い合わせフォームより無料相談をお申込みください。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
↓
