HTML の基本について - NETWORK ENGINEER BLOG

HTML とは

HyperText Markup Language（ハイパーテキストマークアップランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の 1 つ。略して HTML（エイチティーエムエル）と呼ばれることが多い。…（中略）…フォントや文字色の指定などの見た目の指定、などといった機能がある。
出典：フリー百科事典『ウィキペディア（Wikipedia）』

ちょっと何言ってるか分からない。「ハイパーテキスト」って何だろう。

ハイパーテキストとは

ハイパーテキスト (hypertext) とは、複数の文書（テキスト）を相互に関連付け、結び付ける仕組みである。「テキストを超える」という意味から"hyper-"（～を超えた） "text"（文書）と名付けられた。テキスト間を結びつける参照のことをハイパーリンクと言う。…（中略）…最も有名なハイパーテキストの実装は World Wide Web である。
出典：フリー百科事典『ウィキペディア（Wikipedia）』

一言でいうと HTML は Web ページを書くための言語ということみたいです。

HTML の書き方

文章を「タグ」と呼ばれるもので囲って（マークアップ＝目印をつけて）書いていきます。
なんでものびる WEB さんの説明がわかりやすかったので、引用させて頂きます。

出典：なんでものびる WEB

上記のように、開始タグ ＜＞と終了タグ ＜/＞ で囲って書いていきます。
囲まれた文章は、「＜タグの名前＞要素」と呼ばれます。

主な HTML タグについて

＜html＞＜/html＞：HTML 文書であることを宣言
＜head＞＜/head＞：文書のヘッダを指定
＜title＞＜/title＞：文書のタイトルを指定
＜body＞＜/body＞：文書の本文を指定
＜p＞＜/p＞：段落を指定
＜h1～6＞＜/h1～6＞：文書の見出しを指定（h1 が最も大きく、h6 が最も小さい）

出典：なんでものびる WEB

他にも様々なタグがあります。以下は HTML5 のタグの一例です。詳細はこちら
＜img＞＜/img＞：画像からファイルを読み込む
＜strong＞＜/strong＞：文字を太字にする。
＜a＞＜/a＞：ハイパーリンクを指定※
※アンカータグとよばれ、以下のように記述します。

<a href="sample.html" title="これはリンクです" target="_blank">

HTML の例

上記の HTML タグを使った例です。

<html>
<head>
<title>NETWORK ENGINEER BLOG</title>
</head>
<body>
<h1>HTML の書き方</h1>
<h2>主な HTML タグについて</h2>
<p>HTML タグには、たくさん種類があります。</p>
<p>アンカータグを使えば、<a href=https://friendsnow.hatenablog.com/ target=”_blank”>リンク</a>を挿入することもできます。
</body>
</html>

上記のソースコードを HTML でみると以下（右側）のように表示されます。
f:id:FriendsNow:20210221073937p:plain

以上