HTMLとは？初心者向けに基礎知識を解説
2024.08.14
HTMLとは、Webページを作るための言語のことです。HTMLの基本やしくみ、種類やタグについて、初心者向けにわかりやすく解説します。HTMLの基礎知識を身につけて、Webサイト制作のスキルを向上させましょう。
HTMLの基本とは
HTMLとは、HyperText Markup Languageの略で、ハイパーテキストという文書形式をマークアップするための言語です。ハイパーテキストとは、Webページの中にリンクを埋め込んで、他のページにジャンプできるようにした文書のことです。マークアップとは、文書の構造や見た目を指定するために、テキストにタグと呼ばれる記号を付け加えることです。
HTMLでは、タグを使って、見出しや段落、リストや画像などの要素を作ります。タグは、<と>で囲まれた文字列で、開始タグと終了タグのペアで要素を囲みます。例えば、<p>これは段落です</p>というように書くと、これは段落ですというテキストが段落として表示されます。タグには、属性と呼ばれる追加情報を指定できます。例えば、<img src=“image.jpg” alt=“画像の説明”>というように書くと、image.jpgというファイル名の画像が表示されます。srcとaltは属性名で、=の後に続く文字列は属性値です。
HTMLは、Webブラウザと呼ばれるソフトウェアによって解釈されて、Webページとして表示されます。Webブラウザは、HTMLのタグや属性を読み取って、文書の構造や見た目を決めます。Webブラウザには、Google ChromeやFirefox、Safariなどがあります。
HTMLのしくみを理解しよう
HTMLは、Webページを作るための言語ですが、WebページだけではWebサイトにはなりません。Webサイトとは、複数のWebページが相互にリンクされた集合体です。Webサイトを作るには、HTML以外にも、CSSやJavaScriptという言語を使います。
CSSの役割とは
CSSとは、Cascading Style Sheetsの略で、Webページの見た目を指定するための言語です。HTMLでは、タグを使って文書の構造を決めますが、CSSでは、セレクタと呼ばれる記法でタグを選択して、スタイルと呼ばれる見た目の設定をします。
例えば、p {color: red;}というように書くと、pタグで囲まれたテキストの色が赤になります。
pはセレクタで、{color: red;}はスタイルです。
CSSでは、色やフォント、サイズや位置、余白や枠線などの見た目の要素を細かく指定できます。CSSを使うと、Webページのデザインを自由に変えることができます。CSSは、HTMLとは別のファイルに書いて、HTMLからリンクすることができます。
例えば、<link rel=“stylesheet” href=“style.css”>というように書くと、style.cssというファイル名のCSSが読み込まれます。relとhrefは属性名で、stylesheetとstyle.cssは属性値です。
Webデザインの重要性
Webデザインとは、Webページの見た目や使いやすさを考えることです。Webデザインは、Webサイトの魅力や効果に大きく影響します。Webデザインには、以下のような要素があります。
- レイアウト
Webページの要素の配置やバランスを決めることです。レイアウトは、Webページの見た目や読みやすさに影響します。レイアウトは、CSSのプロパティやフレームワークと呼ばれるツールを使って作ります。 - カラー
Webページの色の選択や組み合わせを決めることです。カラーは、Webページの雰囲気や印象に影響します。カラーは、CSSのプロパティやカラーパレットと呼ばれるツールを使って決めます。 - フォント
Webページの文字の種類や大きさを決めることです。フォントは、Webページの見た目や読みやすさに影響します。フォントは、CSSのプロパティやWebフォントと呼ばれるサービスを使って決めます。 - 画像
Webページに挿入する写真やイラストなどのビジュアル要素です。画像は、Webページの魅力や情報伝達に影響します。画像は、HTMLのタグやCSSのプロパティや画像編集ソフトを使って挿入や加工をします。 - ナビゲーション
Webページの中やWebサイトの間を移動するためのリンクやボタンなどの操作要素です。ナビゲーションは、Webページの使いやすさやアクセシビリティに影響します。ナビゲーションは、HTMLのタグやCSSのプロパティやJavaScriptと呼ばれる言語を使って作ります。
Webデザインは、Webサイトの目的や対象者に合わせて、最適な見た目や使いやすさを提供することが重要です。Webデザインの基礎や実践の方法については、Webデザインの教材や参考書、オンラインコースなどを利用すると良いでしょう。
異なるHTMLの種類について
HTMLは、Webページを作るための言語ですが、HTMLには、異なるバージョンや種類があります。HTMLのバージョンや種類によって、使えるタグや属性、文法や仕様が異なります。HTMLのバージョンや種類には、以下のようなものがあります。
XHTML1.0の特徴
XHTML1.0とは、Extensible HyperText Markup Language 1.0の略で、HTMLの拡張版として2000年に制定された言語です。XHTML1.0は、HTMLとXMLという別の言語の特徴を組み合わせたもので、文書の構造的な厳密性と将来的な拡張性を高めようとした規格で、現在主流のHTML5への移行期に重要な役割を果たしました。
HTML5の新機能
HTML5とは、HyperText Markup Language 5の略で、HTMLの最新版として2014年に制定された言語です。HTML5は、HTMLの基本的な機能を継承しつつ、Webページの機能や表現力を向上させるための新しいタグや属性、APIと呼ばれる機能を追加したものです。HTML5の新機能には、以下のようなものがあります。
- セマンティックタグ
Webページの構造や意味を明確にするためのタグです。例えば、<header>や<footer>、<nav>や<section>などのタグがあります。セマンティックタグを使うと、Webページの可読性やアクセシビリティが向上します。 - メディアタグ
音声や動画などのメディアコンテンツを簡単に埋め込むためのタグです。例えば、<audio>や<video>、<source>や<track>などのタグがあります。メディアタグを使うと、Webページの魅力やインタラクティブ性が向上します。 - フォームタグ
ユーザーからの入力や操作を受け付けるためのタグです。例えば、<input>や<select>、<button>や<datalist>などのタグがあります。フォームタグには、様々な種類や属性があり、入力の制限や検証を行うことができます。 - キャンバスタグ
図形や画像などのグラフィックスを描画するためのタグです。例えば、<canvas>や<svg>などのタグがあります。キャンバスタグを使うと、Webページに動的なアニメーションやゲームなどを作ることができます。 - API
Application Programming Interfaceの略で、Webページとブラウザやデバイスとのやりとりを可能にするための機能です。例えば、Geolocation APIやWeb Storage API、Web Socket APIやWeb Worker APIなどがあります。APIを使うと、Webページの機能やパフォーマンスが向上します。
HTML5は、Webページの機能や表現力を向上させるための言語です。HTML5の新機能を使うには、HTMLの基本的な文法や仕様に加えて、CSSやJavaScriptの知識も必要です。HTML5の基礎や実践の方法については、HTML5の教材や参考書、オンラインコースなどを利用すると良いでしょう。
XHTML4.01の違い
XHTML4.01とは、Extensible HyperText Markup Language 4.01の略で、XHTML1.0の改良版として2009年に制定された言語です。XHTML4.01は、XHTML1.0と同様に、HTMLとXMLの特徴を組み合わせたものですが、HTML4.01の仕様に準拠するようになりました。
XHTML4.01の違いには、以下のようなものがあります。
- DOCTYPE宣言
文書の種類を宣言するための記述です。XHTML4.01では、HTML4.01のDOCTYPE宣言をそのまま使うことができます。
例えば、<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>というように書きます。 - 名前空間宣言
XMLの仕様に従って、文書の名前空間を宣言するための記述です。XHTML4.01では、<html>タグに名前空間宣言を必ず付ける必要があります。
例えば、<html xmlns=“http://www.w3.org/1999/xhtml”>というように書きます。 - 属性の引用符
属性値を囲むための記号です。XHTML4.01では、属性値は必ずダブルクォーテーションで囲む必要があります。
例えば、<img src=“image.jpg” alt=“画像の説明”>というように書きます。 - 空要素の終了
開始タグだけで構成される要素のことです。XHTML4.01では、空要素は必ずスラッシュで終了する必要があります。例えば、<br />や<hr />、<img />などのように書きます。
XHTML4.01は、HTML4.01の仕様に準拠するようになった言語です。XHTML4.01を使うには、HTMLとXMLの両方の文法や仕様に注意する必要があります。XHTML4.01の基礎や実践の方法については、XHTML4.01の教材や参考書、オンラインコースなどを利用すると良いでしょう。
HTMLタグの概要
HTMLタグとは、HTMLの文書において、文書の構造や見た目を指定するために使う記号のことです。HTMLタグは、<と>で囲まれた文字列で、開始タグと終了タグのペアで要素を囲みます。HTMLタグには、様々な種類や属性があり、Webページの内容や機能を作ります。
基本的なタグ
HTMLタグには、以下のような種類があります。
見出しタグ
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>文書の見出しやタイトルを作るためのタグです。見出しタグは、文書の構造や重要度を示します。
段落タグ
<p>段落タグ<br>改行</p>文書の段落を作るためのタグです。段落タグは、文書の内容や流れを示します。
リストタグ
<ul>
<li>文書の項目</li>
<li>文書の項目</li>
</ul>
<ol>
<li>順序付きリスト</li>
<li>順序付きリスト</li>
</ol>文書のリストを作るためのタグです。リストタグは、文書の項目や順序を示します。
リンクタグ
<a href=""></a><link></link>
文書のリンクを作るためのタグです。リンクタグは、文書の関連や移動を示します。
画像タグ
<img>、<map>
文書の画像を挿入するためのタグです。画像タグは、文書のビジュアルや情報を示します。
テーブルタグ
<table>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
</table>文書のテーブルを作るためのタグです。テーブルタグは、文書のデータや構造を示します。
フォームタグ
ユーザーからの入力や操作を受け付けるためのタグです。
例えば、<input>や<select>、<button>や<datalist>などのタグがあります。フォームタグには、様々な種類や属性があり、入力の制限や検証を行うことができます。
inputタグ
<input type=“text” name=“name” value=“山田太郎”>ユーザーからのテキストや数字、チェックボックスやラジオボタンなどの入力を受け付けるためのタグです。inputタグには、type属性やname属性、value属性などがあります。type属性は、入力の種類を指定します。name属性は、入力の名前を指定します。value属性は、入力の初期値や送信値を指定します。
selectタグ
<select name=“prefecture” size=“5” multiple>
<optgroup label=“関東”>
<option value=“東京”>東京</option>
<option value=“神奈川”>神奈川</option>
</optgroup>
<optgroup label=“関西”>
<option value=“大阪”>大阪</option>
<option value=“京都”>京都</option>
</optgroup>
</select>ユーザーからの選択肢の入力を受け付けるためのタグです。selectタグには、name属性やsize属性、multiple属性などがあります。name属性は、入力の名前を指定します。size属性は、表示する選択肢の数を指定します。multiple属性は、複数の選択肢を選べるかどうかを指定します。selectタグの中には、optionタグやoptgroupタグを入れます。optionタグは、選択肢を作るためのタグです。optgroupタグは、選択肢をグループ化するためのタグです。
buttonタグ
<button type=“submit” name=“submit” value=“送信”><img src=“send.png” alt=“送信”>送信</button>ユーザーからのクリックやタップなどの操作を受け付けるためのタグです。buttonタグには、type属性やname属性、value属性などがあります。type属性は、ボタンの種類を指定します。name属性は、ボタンの名前を指定します。value属性は、ボタンの送信値を指定します。buttonタグの中には、テキストや画像などを入れることができます。
フォームタグは、ユーザーからの入力や操作を受け付けるためのタグです。フォームタグを使うには、HTMLの基本的な文法や仕様に加えて、CSSやJavaScriptの知識も必要です。フォームタグの基礎や実践の方法については、フォームタグの教材や参考書、オンラインコースなどを利用すると良いでしょう。
まとめ: HTMLの基本を押さえよう
HTMLとは、Webページを作るための言語のことです。HTMLの基本やしくみ、種類やタグについて、初心者向けにわかりやすく解説しました。
HTMLの基本を押さえたら、次のステップとして、CSSやJavaScriptの基礎や実践の方法について学ぶことをおすすめします。HTMLとCSSとJavaScriptの知識を身につけて、Webサイト制作のプロフェッショナルを目指しましょう。
