HTML入門：基本から学ぶHTMLの構造と構成要素を解説！

HTMLとは？

HTMLは、ハイパーテキスト記述言語（HyperText Markup Language）です。ハイパーテキストとは、複数の文書を相互参照するためのリンク（ハイパーリンク）機能を有する仕組みを指します。ハイパーテキストはWeb（World Wide Web）を始めとするウェブ系システムで標準利用されています。

ウェブコンテンツはHTMLで記述されており、HTTP通信プロトコルを用いて、ウェブサーバーとウェブクライアント間でコンテンツの通信を行います。また、直接PCに格納されたHTML文書をブラウザで表示することも可能です。

HTMLの仕様は？

HTMLの仕様はWeb Hypertext Application Technology Working Group（WHATWG）が策定し、World Wide Web Consortium（W3C）で勧告されています。現在最新の仕様は、HTML 5.2まで勧告されています。参考：WHATWG HTML Living Standard 参考：HTML 5.2 W3C Recommendation

HTMLの文書作成は？

HTMLはハイパーテキストを記述する言語ですので、テキスト文書を作成する環境があればすぐにでも開始できます。具体的にはHTMLを編集するためのエディタ、およびHTMLを表示するブラウザの準備ができれば問題ありません。動作環境はクライアントPCで作業できれば十分です。

HTMLとは？できることや初心者向けのタグの例、CSSについても紹介

HTMLの基本構造は？

HTMLの基本構造は以下の要素からなります。・文書型宣言 　タグは<!DOCTYPE html> 　このテキストが最新HTMLであることを表します（他のバージョンを指定することも可能）・html要素 　タグは<html></html> 　head要素とbody要素からなります・head要素 　タグは<head></head> 　文書ヘッダーの明示（ブラウザに表示されない部分）　meta要素（文書情報）、link要素（他との関連情報）、title要素（タイトル情報）からなります・body要素 　タグは<body></body> 　文書内容の明示（ブラウザに表示される部分）　article要素からなります（記事であることを明示）

各要素は<要素>として宣言し、</要素>として括ります。

使用例： <!DOCTYPE html> <html> 　<head> 　　<title>この文章のタイトル</title> 　</head> 　<body> 　　ここに必要な文書内容を書きます　</body> </html>

残る作業は必要な体裁を整えたり見栄えを良くしたりする処理を行うだけです。なおはコメントを表しますので適宜利用します。

HTMLで使う要素とタグとは？

HTMLの要素とはHTMLの文書を構成するものです。タグとはその要素を認識するための記号（<></>）を意味します。各要素は開始タグ（<>）と内容そして終了タグ（</>）からなります。

さらに要素に属性を追加指定することも可能です。属性とは要素で用いる各種設定を変更したり、動作を微調整したりするものを指します。

これまでにHTMLの基本構造の要素をお話ししました。あとは必要な要素を組み合わせるだけで、HTML文書が簡単に作成できます。

HTMLの体裁を整えるには？

HTML文書の体裁を整えるために以下の代表的な要素が用意されています。

・段落（ページレイアウト）の構成要素 　段落（ページレイアウト）の構成要素は、文書を構成する基本要素を指します　主要な要素： 　　p　　段落構成を明示します　　pre　整形済みテキストとします　　hr 　水平線を引きます（終了タグはありません）　　br 　明示的な改行を行います（終了タグはありません）　使用例： 　　<p>  　　文章を入力します　　<pre>整形済み文章です</pre> 　　文章を入力します<br>ここから次の行に改行されます　　<hr> 　　</p>

・見出しの構成要素 　見出しの構成要素は、見出しの種類を宣言します　主要な要素： 　　h1～h6　見出しの指定、h1が最上位となります　使用例： 　　<p>  　　<h1>大見出しです</h1> 　　<h2>2番目の見出しです</h2> 　　中見出しの文章を入力します　　中見出しの文章を入力します　　<h3>3番目の見出しです</h3> 　　小見出しの文章を入力します　　小見出しの文章を入力します　　</p>

・リスト（項目表示）の構成要素 　リストの構成要素は、リスト化された項目を指定した項目番号あり・なしで表示します　主要な要素： 　　li　　リスト項目を指定します（終了タグは省略可能です）　　ol 　順序付きリスト、typeでリスト項目番号（1、A、a、I）を指定できます　　ul 　順序なしリスト、typeでリスト項目マーク（disc、circle、sqare）を指定できます　使用例： 　　<p>  　　<h2>リスト表示です</h2> 　　　<ul> 　　　　 <li>リスト項目の1番目です（項目番号なし）</li> 　　　　 <li>リスト項目の2番目です（項目番号なし）</li> 　　　　 <li>リスト項目の3番目です（項目番号なし）</li> 　　　</ul> 　　　<ol> 　　　　 <li>リスト項目の1番目です（項目番号あり）</li> 　　　　 <li>リスト項目の2番目です（項目番号あり）</li> 　　　　 <li>リスト項目の3番目です（項目番号あり）</li> 　　　</ol> 　　</p>

・表（テーブル）の構成要素 　表の構成要素は、表形式データ等の情報を表示します　本構成要素はHTML5で非推奨属性や廃止属性があり、CSSで代替可能です　主要な要素： 　　table　表の構成要素を宣言します　　tr 　　表の行を示します　　th 　　ヘッダのセルを示します　　td 　　データのセルを示します　使用例： 　　<p>  　　<h2>表の表示です</h2> 　　<table> 　　　<tr> 　　　　<th>表の項目</th> 　　　　<th>列1の項目</th> 　　　　<th>列2の項目</th> 　　　</tr> 　　　<tr> 　　　　<td>行1の項目</td> 　　　　<td>行1列1の情報を書きます</td> 　　　　<td>行1列2の情報を書きます</td> 　　　</tr> 　　　<tr> 　　　　<td>行2の項目</td> 　　　　<td>行2列1の情報を書きます</td> 　　　　<td>行2列2の情報を書きます</td> 　　　</tr> 　　</table> 　　</p>

HTMLの見栄え調整や関連情報を追加するには？

HTML文書の見栄え調整や情報追加のために、以下の代表的な要素が用意されています。

・フォントの構成要素 　フォントの構成要素は、フォントを装飾します　主要な要素： 　　i 　斜体（イタリック）を指定します　　b　太字（ボールド）を指定します　　big　文字を拡大します（HTML5で廃止）　　small 文字を縮小します　使用例： 　　<p>  　　このフォントは<i>斜体</i>です　　このフォントは<b>太字</b>です　　このフォントは<big>大文字</big>です　　このフォントは<small>小文字</small>です　　</p>

・リンク構成要素 　リンク構成要素はハイパーリンクを作成します　主要な要素： 　　a　アンカーを指定し、ハイパーリンクを作成します　使用例： 　　<p>  　　<a href="https://sample.sample-domain.com/sample" >Sample URLのリンクです</a> 　　</p>

・画像構成要素 　画像構成要素は、画像を文書に埋め込む指示を行います　主要な要素： 　　img　埋め込み画像の表示し、終了タグはありません　使用例： 　　<p>  　　<img src="sample_picture.jpg" alt="サンプル画像"> 　　</p>

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！

HTMLの見栄えをさらに良くするには？

HTMLの見栄えをさらに良くするために、CSSが用いられています。CSSとはCascading Style Sheetsの略で、構造化文書の見た目を記述するための言語を指します。CSSはHTMLに代表されるマークアップ言語で記述された文書のスタイルを指定します。具体的には、文書のフォントやレイアウト・色等を指定し文書の表現力を高めます。

使用方法は、<style></style>で括ったタグの間をstyle要素として処理する他、style属性やlink要素を用います。ここでは、フォントの指定や文字色・背景色、幅等が詳細に指定できます。

HTML5では、文字の大きさや種類・色等の見栄えの指定はCSSが担当します。同様に、HTML5では文書の情報構造をHTMLが担当します。そのため、見栄えに関連する要素や属性については非推奨項目や廃止項目が増えています。HTMLとCSSを併用することでデザイン性の高いウェブページが作成可能です。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

HTMLの基本を理解し、一歩進んだウェブドキュメント作成に取り掛かりましょう

HTMLはウェブコンテンツに必須の記述言語です。HTMLの基本構造は複雑なものではありません。HTMLに慣れたら次はコンテンツの見栄えを高めるためにCSSに挑戦しましょう。実際のウェブコンテンツ作成には、HTMLとCSSをセットでメンテナンスする必要がありますので、さらに理解を深めることをおすすめします。

HTML

入門

本

気になる人のXをフォローしよう！