HTMLは、Web（ウェブ）サイトを制作する上で欠かせない言語です。特に初心者にとって、HTMLの正しい理解は今後の成長の土台となります。今回は、HTMLの基本構造やタグの使い方について、初心者にもわかりやすく解説します。HTMLの基礎知識をしっかり学びたい方は、ぜひ参考にしてください。
忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者CODE」が運営しているプログラミング情報サイトです。
- プログラミングの効果的な学習方法
- プログラミング用語の解説
- エンジニアのキャリアに関する情報
など、プログラミングを始めたばかりの初学者に役立つ記事を幅広く公開しています！
HTMLとは？
HTMLとは、Hyper Text Markup Languageの略称で、Webページを作成するためのマークアップ言語（文章の要素を目印で囲み、意味付けするための言語）です。
HTMLは、Webページの構造を定義します。例えば、見出しや段落、リスト、リンクなどを定義し、ブラウザにどのように表示するかを指示します。ただし、HTML自体はデザインやレイアウトの詳細な設定を行うものではなく、その役割は主にCSS（Webページの見た目を指定するマークアップ言語）によって補完されます。
過去にはHTML4やXHTML、HTML5といったバージョンが存在していましたが、現在の標準規格は「HTML Living Standard」と呼ばれるものです。この標準規格は、Web技術の進化にともない常に更新され続けており、最新のWeb技術やデバイスに対応できるように設計されています。
HTMLを構成する3要素
HTMLの構成要素としては、「タグ」「要素」「属性」の3つがあり、これらが適切に組み合わさることで、Webページが正しく表示され、機能します。ここでは、それぞれの概要や役割を解説します。
タグ
タグとは、HTMLの記述に意味を与える印であり、Webページ上の要素に特定の機能や形式を示すために使われます。
タグは通常、角括弧（<>）で囲まれた文字列で構成され、例えば「<p>」というタグは「ここが段落の始まりですよ」という印です。段落の終わりを示すときには「閉じタグ」と呼ばれるものを使い、
「</p>」と書きます。これらを組み合わせて「<p>文章</p>」と書くと、「この文章は段落ですよ」とHTMLに伝えることができます。
要素
要素とは、マークアップされた文字列やコンテンツの単位のことを指します。要素はタグで囲まれた内容であり、
例えば「<body>」タグ内に配置された「<p>内容</p>」がひとつの要素です。
このように、HTMLの要素はタグによって定義され、特定の機能や役割をもちます。
オススメ：HTMLの問題を無料で公開中!
属性
属性とは、HTML要素に追加の情報を与えるために使用される仕組みです。例えば、リンクをクリックすると新しいタブで開くようにしたいときは、リンクを作るというタグに、「href」という属性を使ってリンク先のURLを指定します。この「href」とは、「リンク先のアドレスをここに書いてください」という意味です。次に、「target」という属性を使って「_blank」と指定することで、新しいタブでそのリンクを開くように指示できます。「target」は「このリンクをどこで開くか」を決める属性です。
これらをまとめると、<a href=””URL”” target=””_blank””>文字</a>」という形式で記述されます。このように、要素に対してさらなる細かい指示を与えるのが属性です。
代表的なHTMLタグ
ここでは、Web制作の初心者が知っておくべき代表的なHTMLタグを紹介します。
また、基本的なHTMLタグを短時間で学びたい方は、下記の解説動画もご覧ください。
見出し【<h1>～<h6>タグ】
見出しタグは、Webページ内で重要な情報を階層的に表示する際に使用します。見出しタグは6段階に分かれており、最も重要な見出しには<h2>タグを使います。この階層構造に従うことで、ページ内の情報が視覚的にもわかりやすく整理されます。例：
| <h1>見出し1</h1>
<h2>見出し2</h2> |
段落・通常のテキスト【<p>タグ】
段落タグは、文章のまとまりを表す際に使用します。<p>タグ内で改行しても、ブラウザ上では自動で改行されない点に注意しましょう。このタグを使用することで、文の塊を分けて視覚的に読みやすくすることができます。
例：
| <p>この文章は段落タグで囲まれています。</p> |
テキストの改行【<br>タグ】
タグ内で明示的に改行をしたい場合には、<br>タグを使用します。
例：
| このテキストは<br>改行されます。 |
リンクを挿入【<a>タグ】
リンクを挿入するためには<a>タグを使います。このタグを用いることで、他のページや外部サイトへのリンクを設定可能です。リンク先のURLはhref属性に指定し、クリック可能なテキストはタグ内に記述します。
例：
| <a href=”https://example.com”>リンクテキスト</a> |
画像を表示【<img>タグ】
Webページに画像を表示する際は、タグを使用します。src属性に画像ファイルを指定し、alt属性には画像が表示されなかった場合に代替テキストを指定することが推奨されています。
例：
| <img src=”images/example.png” alt=”サンプル画像”> |
太文字で強調【<strong>タグ】
特定のテキストを太字で強調したい場合にはタグを使用します。<strong>タグを使えば、視覚的な強調だけでなく、検索エンジンに対しても重要なテキストであると示せます。
例：
| <strong>重要なテキスト</strong> |
箇条書き・リストの作成【<ul><ol>タグ】
箇条書きを作成する際には<ul>タグを、順序付きリストを作成する際には<ol>タグを使用します。リスト項目は<li>タグで囲んで記述します。
例：
| <ul>
<li>箇条書き項目1</li> <li>箇条書き項目2</li> </ul> <ol> <li>順序付きリスト1</li> <li>順序付きリスト2</li> </ol> |
表を作成【<table>タグ】
表を作成するためには<table>タグを使います。
その中で「<tr>」タグを使って表の横の行を作り、「<th>」タグで見出し部分を、「<td>」タグで実際のデータを入力するセルを作ります。つまり、「<tr>」は行を作るためのタグで、「<th>」は見出しセル、「<td>」はデータを入れるためのセルという役割があります。
これを組み合わせることで、見やすい表を作ることができます。
例：
| <table>
<tr> <th>名前</th> <th>会員番号</th> </tr> <tr> <td>田中</td> <td>001</td> </tr> <tr> <td>佐藤</td> <td>002</td> </tr> </table> |
未経験からHTMLを学ぶなら
忍者CODE
HTMLを使ったWebサイトを作ってみよう
ここでは、実際にHTMLを使ってWebサイトを制作する方法を、5つのステップで解説します。
また、HTMLを学ぶことはWebデザインの最初のステップですが、より高度なWebサイトを作成するには、CSSやJavaScriptを組み合わせて使用することが重要です。例えば、NINJACODEのWeb制作スクールでは、これらの言語をすべて習得することができるためおすすめです。
1.ツールの準備
Webサイトを作るために必要なツールは、パソコンとテキストエディタ（文字情報を入力・編集・保存するソフトウェア）です。
テキストエディタは、パソコンに標準でインストールされている「メモ帳（Windows）」や「テキストエディット.app（Mac）」を使用できますが、より機能が充実したテキストエディタを使用すると作業が効率的になります。
おすすめのエディタには、Microsoft社が提供する「Visual Studio Code」や、GitHub社が開発した「Atom」などがあります。
2.テキストエディタにHTMLを書く
テキストエディタを準備したら、実際にHTMLを記述していきます。上記で解説した基本的なHTML構造を踏まえ、見出しや本文を記述していきましょう。一から記述するだけでなく、Web上のHTMLテンプレートをパソコンのテキストエディタにコピー＆ペーストすると便利です。
3.テキストエディタを保存
HTMLの記述が完了すれば、テキストエディタを保存しましょう。保存する際には、ファイルの拡張子に注意が必要です。通常、メモ帳などで保存すると拡張子は「.txt」となりますが、これを「.html」に変更することで、ブラウザでWebページとして読み込めるようになります。
4.ブラウザで確認
保存したHTMLファイルを実際にブラウザ（Google Chrome、Safariなど）で確認してみましょう。普段使用しているブラウザでHTMLファイルを開くと、記述した内容がどのように表示されるかを確認できます。表示された結果を見て、必要に応じてHTMLコードを修正しましょう。
5.Webサイトを公開
作成したHTMLファイルをインターネット上で公開するためには、サーバーにアップロードする必要があります。自分でサーバーを構築することも可能ですが、コストや技術的な知識が必要となるため、レンタルサーバーを利用する方法が効率的です。
多くのレンタルサーバー会社が手軽に利用できるプランを提供しているため、ニーズに合ったサーバーを選び、HTMLファイルをアップロードして公開しましょう。
まとめ
HTMLは、Webページの構造を定義する基本的なマークアップ言語であり、見出しや段落、リンク、画像など、Webページに必要な要素を配置するために使用されます。未経験からWebデザイナーを目指すなら、HTMLの基礎をしっかりと学ぶことが重要です。
NINJACODEのWeb制作スクールでは、わかりやすく実践的なカリキュラムでHTMLを基礎から学べます。経験豊富な現役クリエイターがメンターとなり、チャットサポートや直接指導があるため、初心者でも安心してじっくり学べる環境です。今すぐ学習を始めたい方は、下記からチェックしてみてください。
- HTMLを学んで自分だけのスキルを身につけたい
- HTMLのスキルを身につけてwebクリエイターとして活躍したい
- サポートが充実しているプログラミングスクールを知りたい
そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
忍者CODEは未経験からでもプロのエンジニアを目指せるオンラインプログラミングスク―ルです。
期間制限なく動画を視聴できるので、自分のペースで学習することができます！
