はじめに

この記事はつい最近ドットインストールというプログラミング勉強サイトを使ってHTMLについて勉強した内容を備忘録代わりにまとめたものです。もっと詳しく知りたければ、実際にドットインストールのサイトを見てもらえばいいかなと思います。

目次

1.HTMLとは？
2.HTMLファイルの作り方
3.HTMLのタグ
4.HTMLの構造

HTMLとは？

まず、HTMLとは”Hyper Text Markup Language” の略称です。
簡単にいえば、HTMLとはホームページにおける構造的な文書を書くための技術になります。HTMLとよくセットで話題に上がることの多いCSSはHTMLで書かれた殺風景な文書を色付けしたり、より華やかにするために用いられる技術です。

この記事では、主にHTMLについて話していきます。

HTMLファイルの作り方

下に今後多く使うことになりそうな基本的なHTMLファイルの骨格を書いてみます

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="utf8">
      <title>はじめてのHTML</title>
   </head>
   <body>
      <p>こんにちは！</p>
   </body> 
</html>

まずこちらを”index.html”として保存してみましょう。（”index”の部分は何でもいいです。）
次に、このファイルをインターネットにドラッグアンドドロップしたら（意味が解らなければ、こちらを参照してください）下のような画面になるはずです。

こんな感じでHTMLファイルは作られます。
ファイルに何か変更を加え、ホームページ内容を更新したい場合は時計回りの矢印をクリックすれば内容が更新されます。

HTMLのタグと属性

ファイルの作り方がわかったところで、次に実際のファイルの中身について説明をしていきます。
まず基本用語としてタグの説明をしようと思います。

タグは文章の内容、位置づけを明らかにする役割があります。ある文章をタグ付けする場合、以下のような形になります。

<タグ>文章</タグ>

タグ付けしたい文章を<タグ></タグ>で挟み込むことでタグ付けをすることができます。
ピンと来ないと思うので、実際にさっき作ってみたindex.htmlの中身を参考にしてみましょう。

<title>はじめてのHTML</title>

<p>こんにちは！</p>

上にあげた二つは例としてわかりやすいんじゃないかと思います。

一つ目は「はじめてのHTML」という文章に<title>（タイトル）という意味を、
二つ目の<p>はparagraphの略で、「こんにちは！」という文章に（段落）という意味を与えています。

このようなものをタグといい、今後多用することになります。

HTMLの構造

ではここで細かくindex.htmlの一行一行の意味を見ていきたいと思います。

<!DOCTYPE html>
HTMLのバージョンを宣言している行です。
これはもう考えず、一行目に書くものだ！という認識でいいと思います。

<html lang="ja"></html>
ホームページの本文は基本的に<html>タグで囲ってやります。これもそうゆうものなのか、という感じでいいと思います。lang="ja"とすることで「日本語でサイトを書きます」ということを宣言しています。

<head></head>
<head>タグで囲まれた部分に文章自体の情報（文字コード、タイトルなど）の設定を記入していきます。直接ホームページ本文中に現れることはない部分です。
実際に、この<head></head>内で<meta charset="utf8">として文字コードが宣言されています。
ちなみにタイトルというのはホームページを開いたときに上のほうに出てくる名前です。

<body></body>
<body>タグに囲まれた部分は実際に本文となる部分です。

おわりに

今回は本当に初歩の初歩について書いてみました。
この先のことも見たいと思ってくれた方は今後も書いていくので見ていただけたらと思います。