HTMLとは？実際のコードを書いて解説！

2019年12月15日

HTMLとは？
- HTMLとは「WEBサイトを作るためのマークアップ言語」
- どうやって作る？
実際にHTMLを書いてみる
- 【1】メモ帳を開いて以下のコードを貼り付ける
- 【2】HTMLを追記する

HTMLとは？

HTMLとは「WEBサイトを作るためのマークアップ言語」

HTMLとは、

Hyper Text Markup Language
（ハイパーテキスト・マークアップ・ランゲージ）

の略で、

WEBサイトを作るためのプログラミング言語のようなもの

（正確にはマークアップ言語）です。

[jin-yohaku30]
[chat face=”mameshiba001.png” name=”まめしばくん” align=”left” border=”gray” bg=”none”]世の中のwebサイトはHTMLでできているんだ！[/chat]
[jin-yohaku20]

どうやって作る？

メモ帳などでHTMLを書いていき、〇〇.htmlという名前で保存することで作成できます。

HTMLはwebサイトとして表示させたい文章や画像を、タグと呼ばれるマーク(文字)で囲み記述していきます。

例えばWEBサイトに「あいうえお」という文字を表示させるときはこのようにします。

あいうえお

タグには他にも

やなどがありそれぞれに意味があります。
先ほどの
はParagraph(段落)の略で、文章を表示するときに使います。

は見出しに、は画像の表示に使います。

実際にHTMLを書いてみる

言葉だけではわかりづらいので実際にHTMLファイルを作成してブラウザで表示してみましょう。

【1】メモ帳を開いて以下のコードを貼り付ける

下のコードはHTMLを書くときの決まり文句のようなものです。メモ帳を開いてこのコードを貼り付けましょう。

<div>
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
    </div>

<div>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

</div>

[jin-yohaku20]

【2】HTMLを追記する

先ほど貼り付けたコードとの間に追記してみましょう。

    <div>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>こんにちは</p>  ←この行を追加
</body>
</html>
    </div>

<div>

<head>

<title>Document</title>

</head>

<body>

<p>こんにちは</p> ←この行を追加

</body>

</html>

</div>

[jin-yohaku20]
追加できたらファイルをindex.htmlという名前で保存します。

保存したらファイルをブラウザで開きます。

Windows

ファイルを右クリック → プログラムから開く → 「Google Chrome」や「safari」などのブラウザを選択

Mac

ファイルを右クリック → このアプリケーションで開く → 「Google Chrome」や「safari」などのブラウザを選択

ブラウザで開く

ブラウザでこんにちはという文字が表示されました！ブラウザでHTMLを表示

少しだけHTMLがどんなものかわかってきたのではないでしょうか。

今回はHTMLの概要をお伝えしました！

詳しい書き方についてはまた別の記事で紹介します！