【WEB入門】HTMLとは？
WEB制作初心者にもわかりやすく解説！

2024/07/08
2024/08/12

HTMLの基本

HTMLの役割

HTMLとは、HyperText Markup Language（ハイパーテキストマークアップランゲージ）の略で、Webページを作成するための言語です。

主な役割は、Webページの構造やコンテンツを記述することにあります。具体的には、見出しや段落、画像、リンクといった要素をタグを使って記述し、コンピュータがその情報を理解できるようにします。HTMLの使い方を学ぶことで、検索エンジンやユーザーにとってわかりやすく、構造化されたコンテンツを提供することが可能になります。

現在のHTMLのバージョン

現在のHTMLのバージョンは、HTML5です。HTML5は、従来のHTML4から大幅に進化しており、動画や音声の埋め込み、グラフィックの描画、フォーム要素の強化などが追加されています。これにより、よりハイクオリティなWebコンテンツが手軽に作成できるようになり、HTMLとCSS、JavaScriptを組み合わせることで、インタラクティブで動的なWebページを作成することが可能となりました。HTML5は、現代のWeb制作において標準となるべきバージョンとして広く使用されています。

HTMLの歴史

HTMLの歴史は1991年に遡ります。当時、ティム・バーナーズ＝リーによって初めて提案されました。最初のバージョンは静的なテキストを表示するためのシンプルなものでしたが、その後、次々とバージョンアップを重ね、HTML4ではフォーム要素やテーブル要素が追加されました。

そして現在のHTML5では、最新のWeb技術に対応するために多くの新機能が追加されています。このように、HTMLは常に進化し続け、Webページの制作に欠かせない基礎技術となっています。

まず覚えておきたい基本的なHTMLタグ

まずはHTML文書を作成する際に基本となるタグを理解し、使い方をマスターしましょう。ここでは、特に頻繁に使われる見出しタグ、段落タグ、リンクタグ、画像タグについてわかりやすく解説します。

見出しタグ

見出しタグは、Webページにおけるタイトル・見出しを定義するためのタグです。HTMLには、<h1>から<h6>までの6種類の見出しタグが存在し、数字が小さいほど重要度高い見出しとされます。

基本的な使い方として、ページのメインタイトルには<h1>を、セクションのタイトルには<h2>や<h3>などを使用します。

See the Pen Untitled by WEB-NEKO (@jghqoiar-the-scripter) on CodePen.

段落タグ

段落タグは、文章の中で段落を示すために使用されます。HTMLでは、段落を<p>タグで囲むことで段落が開始し、終了タグである</p>で終了を示します。段落タグを用いることにより、テキストがきれいにレイアウトされ、読みやすくなります。

See the Pen Untitled by WEB-NEKO (@jghqoiar-the-scripter) on CodePen.

リンクタグ

リンクタグは、他のページやリソースへのハイパーリンクを作成するために使用されます。基本的には<a>タグを用いてリンクを設定し、href属性にリンク先のURLを指定します。例えば、以下のように記述します。

See the Pen Untitled by WEB-NEKO (@jghqoiar-the-scripter) on CodePen.

この例だと<a>タグ内のテキストをクリックするとhref属性で指定されている「https://web-neko.com」へページ遷移します。

画像タグ

画像タグは、Webページに画像を埋め込むために使用します。HTMLでは<img>タグを用い、このタグには画像のファイルパスを指定するsrc属性や、代替テキストを指定するalt属性が必要です。例えば、以下のように記述します。

See the Pen Untitled by WEB-NEKO (@jghqoiar-the-scripter) on CodePen.

この例だと、ページに「https://web-neko.com/wp-content/uploads/2024/07」というファイルが保存されている宛先の中のファイル名「cat-face.png」の画像が表示されます。

また、<img>タグ内でwidthを指定することで画像のサイズをHTMLのみで調整することが可能です。この例だと「width=”200px”」としているので、元の画像サイズはもっと大きいのですが、例の画像のサイズは200pxに調整されて表示されています。

alt属性は、もしも画像が表示されなかった場合に代替テキストとして表示されるため、SEO対策にも有効です。例として「こんなファイル名の画像はないから代替えテキストが代わりに出ているよ！」と表示されている部分がalt属性で設定した代替えテキストです。

HTML文書の基本構造

HTMLとは、Webページを作成するためのマークアップ言語であり、その文書は一定の基本構造に従って記述されます。この基本構造を理解することは、Web制作初心者にとって重要なステップですので、マスターしておきましょう。

以下では、HTML文書の基本構造についてわかりやすく解説します。

DOCTYPE宣言

HTML文書の先頭に記述されるのが「DOCTYPE宣言」です。この宣言は、ブラウザに対して、その文書がどのHTMLバージョンに従って記述されているかを明示する役割があります。現在では、ほとんどのWebページがHTML5で作成されているため、次のように記述されます。

<!DOCTYPE html>

この一行を追加することで、ブラウザがHTML5の仕様に従って文書を解釈するようになります。HTMLで構成する際は必ず記載しましょう。

html要素

DOCTYPE宣言の直後に記述されるのが「html要素」です。この要素は、HTML文書全体を囲む大元のタグであり、次のように記述します。こちらもHTMLでの構成の際は必須になりますので、忘れないようにしましょう。

<html></html>

html要素の内部には、主に「head要素」と「body要素」が含まれます。

head要素とmetaタグ

head要素は、HTML文書の情報を定義する部分であり、metaタグやtitleタグなどが含まれます。例えば、次のように記述します。

<head>
  <meta charset="UTF-8">
  <title>WEBサイトの名前</title>
</head>

metaタグは、文字エンコーディングの設定やページの説明など、検索エンジン最適化（SEO）のための情報も記述できます。

titleタグにはサイトのタイトルを設定する役割があります。例としてtitleタグ内に「うぇぶねこぶろぐ」と設定した場合、ブラウザのタブ表示は以下のようになります。

body要素

body要素は、実際にブラウザ上に表示されるコンテンツを定義する部分です。例えば、次のように記述します。

See the Pen Untitled by WEB-NEKO (@jghqoiar-the-scripter) on CodePen.

この部分に、テキスト、画像、リンクなどのコンテンツを配置し、Webページを具体的に作成していきます。

以上が、HTML文書の基本構造です。これらの要素を理解し、正確に使いこなすことで、効率よくWebページを作成することができます。

CSSとHTMLの違い

CSSの役割

CSSとはCascading Style Sheets（カスケーディングスタイルシート）の略で、HTMLで記述されたウェブページの見た目を制御するための言語です。具体的には、フォントの種類、サイズ、色、レイアウト、背景色などのビジュアル要素を指定します。

以下の例では指定クラス内のh1タグに対してcolorプロパティも用いてredを指定しています。これにより文字の色が赤色になります。

See the Pen Untitled by WEB-NEKO (@jghqoiar-the-scripter) on CodePen.

HTMLがウェブページの構造やコンテンツを表すのに対し、CSSはその見た目を装飾する役割を持っています。HTMLで書かれたテキストに対し、CSSを使って色を変えたり、スマートフォンなどのデバイスに応じてレイアウトを調整したりすることができます。

HTMLと組み合わせる方法

HTMLとCSSを組み合わせることで、より魅力的で機能的なWebページを作成することができます。一般的な使い方として、HTML文書にCSSを直接書き込む「インラインスタイル」、同じHTML文書内にスタイルをまとめる「内部スタイルシート」、別ファイルとしてCSSファイルを作成し、HTMLからリンクする「外部スタイルシート」の3つの方法があります。

一般的には「外部スタイルシート」の方法を使う事がほとんどです。外部スタイルシートを使用する場合、HTML文書の\セクション内にリンクタグ（\）を挿入します。例えば、以下のように記述します。

<link rel="stylesheet" type="text/css" href="styles.css">

これにより、styles.cssファイル内に記述されたCSSがHTML文書に適用されます。この方法の利点は、複数のHTMLファイルで同じCSSを共有することができ、管理と更新が簡単になる点です。

HTMLを学ぶ方法

【おすすめ】ドットインストール

Web制作初心者にとってHTMLを学ぶ最初のステップとしておすすめなのが「ドットインストール」です。このオンライン学習プラットフォームは、HTMLとは何かを実際の動作を短い動画にて非常にわかりやすく解説してくれるため、初めてHTMLに触れる方でもスムーズに学習を進めることができます。基本的に動画形式で教材を提供しており、実際のコーディングの使い方を具体的に見ることができるので、テキスト情報だけでは理解しにくい部分も簡単に把握することができます。

ドットインストールでは、HTMLの基本的なタグや要素の使い方から、CSSを用いたスタイリングまでを一貫して学ぶことができます。段階的に難易度が上がるため、初心者でも無理なく進められるカリキュラムが特徴です。HTMLの基礎から応用までを短期間で習得することが可能です。

自分は実際にドットインストールで学習してきたのですが、1番いいなと思ったところはHTMLやCSS以外にもJavascriptやPHPを初めとした使用頻度の高い言語も含め幅広く学習できるので、同じ形式の学習プラットフォームを長く使えるという点で、独学で自分のペースで進めたいという方はいろんな方向に知識を伸ばせるのでおすすめです。

無料会員でも基礎的な部分の教材は使用できるので、まずはお試しで使ってみてください。使って損はないと思いますよ！

ドットインストールはこちらをクリック

参考書で学ぶ

HTMLを学ぶ際には、参考書も有効です。わかりやすい解説が載っている参考書を手元に置いておくと、インターネットが利用できない環境でも学習を続けることができます。また、紙の書籍はビジュアルに詳しい図解が多く含まれているため、構造の理解がしやすいです。

実際に手を動かしながら学習することもできますし、淡々と知識や概要を頭に入れるには参考書の方がわかりやすくなっているかと思います。

あとは目に入るところに置いておくとやらなきゃって気持ちになるので、モチベ維持におすすめですよ！

まとめ

HTMLとは、HyperText Markup Language（ハイパーテキストマークアップランゲージ）の略であり、Webページを作成するための基本的な言語です。HTMLの役割は、Webページの構造や内容を定義し、その情報をブラウザによって表示できるようにすることです。また、その使い方や基本的なタグの知識を理解することで、初心者でも容易にWebページの制作に取り組むことができます。さらに、CSSとの違いや組み合わせる方法を学ぶことで、よりスタイリッシュで機能的なWebページを作成することが可能です。

この記事では、HTMLの基本からその具体的なタグの使い方、そしてCSSとの違いについてわかりやすく解説しました。これからHTMLを学ぶ方は、オンライン教材や参考書を活用しながら実際にコーディングを行うことが効果的です。HTMLをマスターすることで、Webデザインやフロントエンド開発の基盤を築くことができるので、一緒にがんばりましょう！

HTMLの次はCSSにゃ！