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 でみると以下(右側)のように表示されます。
以上