HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【初心者向け】HTMLの基本を徹底解説｜DOCTYPE宣言・文字コード・見出し・属性の使い方

ハイパーテキスト（Hypertext）とは、Webページ（HTML文書）同士がリンクによって結びつけられている仕組みのことです。Webページ上に設置されたリンクは「ハイパーテキスト」と呼ばれます。

HTMLは「HyperText Markup Language」の略称で、その名の通りテキスト文書にタグを使って「マークアップ（印付け）」を行うための言語です。マークアップされた情報をもとに、Webブラウザは文書の構造を判断して画面に表示します。Webページの作成において最も広く利用されている言語です。

また、HTML5はHTML 4.01、XHTML 1.0、XHTML 1.1に代わる次世代の標準規格として策定されました。World Wide Web上のコンテンツを構造化し表現するための標準であり、これまでAdobe FlashやMicrosoft Silverlight、Google Gearsなどサードパーティ製ブラウザプラグインに依存していた動画再生やドラッグ＆ドロップといった機能が標準で組み込まれています。

HTMLのDOCTYPE宣言

HTML文書を作成する際、最初に記述すべきものがDOCTYPE宣言です。このページがどのバージョンのHTMLで書かれているかをブラウザに伝える役割があり、大文字・小文字は区別されません。

HTML5のDOCTYPE宣言は以下のように記述します。

<!DOCTYPE html>

HTMLの文字エンコーディング

HTMLではcharset属性を<meta>タグと組み合わせて使用し、文字エンコーディングを指定します。

基本の構文は以下の通りです。

<meta charset="char_set">

「char_set」の部分に、HTML文書で使用する文字セット（例：UTF-8）を指定します。

実際に文字エンコーディングを指定したコード例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
</head>
<body>
<h2>Example</h2>
<p>We have added demo text:<p>
<textarea rows = "4" cols = "50">
Here, we are mentioned the demo content. This is just to display an example of charset in an HTML document.
</textarea><br>
<button type = "button">Previous</button>
<button type = "button">Next</button>
</body>
</html>

実行結果

【初心者向け】HTMLの基本を徹底解説｜DOCTYPE宣言・文字コード・見出し・属性の使い方

HTMLの見出し（Headings）

あらゆる文書は見出しから始まります。見出しにはさまざまなサイズを指定でき、HTMLには6段階の見出しレベルが用意されており、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>の各要素で表現します。なお、見出しを表示する際、ブラウザは見出しの前後に自動的に1行分の余白を追加します。

HTMLの要素（Elements）

HTML要素は開始タグによって定義されます。要素の中に別のコンテンツが含まれる場合は、要素名の前にスラッシュ（/）を付けた終了タグで閉じます。

HTMLの属性（Attributes）

属性はHTML要素の特性（特徴）を定義するもので、要素の開始タグ内に記述します。すべての属性は名前（name）と値（value）の2つの部分で構成されています。例えば以下のようになります。

<canvas id="newCanvas" width="400" height="300">

その他の例も挙げてみましょう。

<img alt="alternate text">

HTML5の標準仕様では、属性値を引用符で囲むことは必須ではありませんが、可読性や保守性の観点から、常に引用符を付けることが推奨される良い習慣となっています。

HTMLの書式設定（Formatting）

書式設定とは、Webページ上のテキストを装飾することです。太字、斜体、取り消し線、テキストのハイライト表示などが含まれます。具体的なコード例を見ていきましょう。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>Tags for formatting text in HTML</h2>
<strong>Strong text</strong><br>
<b>Bold text</b><br>
<em>Emphasized text</em><br>
<i>Italic Text</i><br>
<mark>Highlighted text</mark>
</body>
</html>

実行結果

【初心者向け】HTMLの基本を徹底解説｜DOCTYPE宣言・文字コード・見出し・属性の使い方

HTMLのコメント（Comments）

HTMLのコメントは、<!-- … -->タグの間に記述します。このタグ内に書かれた内容はすべてコメントとして扱われ、ブラウザによって完全に無視されるため、画面上には一切表示されません。

  1. HTMLのplaceholder属性とは？使い方とサンプルコードを解説

    HTMLのplaceholder（プレースホルダー）属性は、ユーザーが何も入力する前に、input要素やtextarea要素の中に表示されるヒントテキスト（仮置きの文字列）を指定するための属性です。フォームの入力欄に「氏名」「メールアドレス」など、どのような内容を入力すべきかを示すことで、ユーザーの理解を助け、入力ミスを減らす効果があります。placeholder属性の基本構文placeholder属性は以下のように記述します。<タグ名 placeholder=表示したいテキスト></タグ名>placeholder属性に指定したテキストは、入力欄が空の状態でのみ表示され

  2. HTMLテキストフォーマットとは？主要な書式設定タグ10選と使い方を解説

    HTMLのテキストフォーマット（書式設定）とは、HTML文書内でテキストの見た目や意味を整えるために特別に用意された要素のことです。これらのタグを使いこなすことで、太字・斜体・ハイライトなど、さまざまなテキスト表現が可能になり、文章の可読性や伝わりやすさが大きく向上します。 基本構文 テキストフォーマット用タグの基本的な書き方は以下のとおりです。 <tagname>content</tagname> 主なテキストフォーマットタグ一覧 HTMLで使われる代表的なテキストフォーマットタグは、以下の10種類です。 番号タグと説明 1<b>テキストを太字に