【HTML5入門】1-3 HTMLの基礎構造

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、HTMLの正式名称や、マークアップの考え方、タグの使い方や記述例を確認しました。

今回はそれを基に、HTMLがどんな構造で書かれていくのかを確認していきましょう。

HTMLに必要なタグ

HTMLを記述する際に、最低限必要になるタグが以下の4種類です。

  • doctypeタグ
  • htmlタグ
  • headタグ
  • bodyタグ

それぞれ順番にみていきましょう。

doctypeタグ

doctypeタグは、HTMLファイルがどのようなHTMLで書かれているのかを伝えるためのタグです。

HTMLは、今の状態になるまでいくつもバージョンアップを重ねてきました。このdoctypeタグを用いることで、書かれているHTMLファイルがどのバージョンなのかを正確に示すことができるようになります。

htmlタグ

htmlタグは、htmlタグの中の範囲が本文(内容)であることを伝えるためのタグです。つまり、htmlタグで囲むことにより、「ここからここまでがhtmlです」と伝えることができるタグとなります。

headタグ

大前提として、headタグは、htmlタグの中に書かれます。その上で、headタグは、「HTMLファイルを解釈する上で必要な情報を書く場所という役割を持ちます。具体的には、ページのタイトルなどがあたります。

bodyタグ

bodyタグも、大前提としてhtmlタグの中に書かれます。bodyタグは、「HTMLファイルの見せたい部分の内容を書く場所」という役割を持ちます。つまり、実際にページに表示させたい内容をbodyタグの中に書いていくことになります。

実際に書いてみよう

では、これらの4つのタグを使って、実際にHTMLファイルに記述をしていきましょう。

まずはdoctypeタグです。doctypeタグは、非常に特殊なタグで、書く場所が決められています。それはHTMLファイルの1行目です。スペースや空行を開けずに、記述します。

実際の記述は、下記の通りになります。

<!doctype html>

「HTML5」というバージョンのHTMLで記述する場合は、この記述をすればOKです。なお、doctypeタグには閉じタグ(</doctype>のような記述)は必要ありません。

続いて、htmlタグを記述していきます。

<!doctype html>
<html>
</html>

このような形で記述します。またhtmlタグ自体に、「このHTMLファイルが日本語なのか英語なのか」などのような、言語に関する情報も記述することができます。今回は日本語であることを記述したいので、下記のように記述します。

<!doctype html>
<html lang="ja">
</html>

「lang」は、言語という意味のLangage、「ja」はJapanese、つまり日本語という意味になります。この記述をすることによって、「htmlの言語は日本語です」という情報を書き込んだことになります。

では次に、headタグとbodyタグを記述していきますが、これらはhtmlタグの中に入れるタグです。htmlタグの中に入っていることをわかりやすくするために、字下げ(インデント)をしましょう。

字下げ(インデント)をする前の記述はこのようになりますが…

<!doctype html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>

headタグとbodyタグを字下げ(インデント)すると、下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
  </head>
  <body>
  </body>
</html>

これをすることによって、視覚的にheadタグとbodyタグがhtmlタグの中に入っていることがわかりやすくなりましたね。

index.html

ここまでのコード例のファイル名に「index.html」という名前を使用してきました。この「index」には、「索引・指標」などと訳されるのが一般的です。その意味通り、「index.html」は、多くのWebサーバーが最初に探すことが多いです。したがって、最初に作るファイルは「index.html」とすることが多いです。

おわりに

今回は、HTMLの基礎的な構造について見てきました。ただ、まだ実際に今の状態のファイルを読み込んでも、ページには何も表示されません。

次回は、実際にページに表示させたいことを表示させるためのタグについてよく使われるものを見ていきます。

次の記事はこちら

【HTML5入門】1-2 マークアップ

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、HTMLファイルを作るためのルールや、使うソフトについてなど、HTML自体の扱いについて考察してきました。

今回は、実際にHTMLで何ができるのか、そして書き方の基本について見ていきましょう。

HTMLの正式名称

HTMLを更に深く知るためには、HTMLという言葉自体がどんな意味を表しているのかを理解しておく必要があります。

HTMLの正式名称は、「HyperText Markup Language」といいます。なんのこっちゃ、と思われるかもしれませんが、日本語にすると、「文字情報をマークアップする言語」という意味になります。

ええ、まだわからないはずです。それもそのはず。まだマークアップについてご説明をしていないですからね。

そこで次は、「マークアップ」について見ていきましょう。

マークアップとは

マークアップとは、どこからどこまでに何があるのかを伝える、という意味になります。

  • 「ここから」〜「ここまで」
  • 「ここには○○がある」

などの情報を文字として記述するのが「マークアップ」となります。これについては、実際にどのように記述するのか、具体例をもとに理解した方がわかりやすい部分があるので、見ていきましょう。

HTMLの書き方

HTMLは、基本的に「タグ」と呼ばれるものを使って記述します。

< >

この不等号を表す記号で囲まれた中に、タグの役割となるものを記入していきます。代表的なものには「見出し」や「段落」があります。

  • 大見出し:<h1>~</h1>
  • 段落:<p>~</p>

このように、該当部分をタグで囲むような記述をします。終わりのタグには「/(スラッシュ)」がついていますが、これは「ここまで」という意味になります。

タグは必ず「半角英数字」で記述する

HTMLを初め、プログラミングをする際に必ず気をつけなければならないことがあります。それが、「全角と半角」です。

基本的にプログラミングは半角英数字を使用して記述します。HTMLにおけるタグも例に漏れず、半角英数字で記述しなければ、コンピュータがきちんと読み取ってくれませんので、記述をする際には注意するようにしましょう。

HTMLの記述例

例えば、見出しを「今日の日記」として、「今日は晴れでした。」という文章をHTMLに記述したいとします。

その場合は、下記のような記述となります。

<h1>今日の日記</h1>
<p>今日は晴れでした。</p>

非常に単純な例ですが、どんなに複雑なHTMLでも、この原則を常に頭に入れておくことで、構造がきちんと理解できるようになります。

おわりに

今回は、マークアップについて触れてきました。徐々にHTMLについてわかってきたところで、次回はHTMLの基礎構造について触れていきましょう。

次の記事はこちら

【HTML5入門】1-1 HTMLとは何か?

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

筆者がプログラミングに最初に触れたのは、中学時代の技術の授業でした。当時はインターネットが普及してまだ間も無く、「HTMLで自分のサイトを作ろう」みたいな感じのテーマの授業だった記憶があります。

本記事執筆時点(2020年4月)で、私はプログラミングスクール「テックキャンプ エンジニア転職」を卒業しました。カリキュラムでも軽く触れたHTMLですが、「改めて基礎からアウトプットをしてみよう!」という軽い気持ちで、ブログにてアウトプットをしてみることにしました。

では、早速いってみましょう。

HTMLとは

HTMLは、私たちが普段インターネットなどで目にするWebページの表示を担っている言語です。俗にこれをマークアップ言語と呼びます。

実際に私たちが目にするWebページの文章や文字は、このHTMLを使って書かれている場合が非常に多いです。

しかし、HTMLだけでは、非常に簡素なWebページとなります。そこで、(後に出てくる)CSSJavaScriptなどを使って、ページのデザインをしたり、ページに動きをつけたりすることが可能になります。基本的にHTMLは、これらの言語と組み合わせて使用する言語となります。

HTMLファイルを作るためのルール

HTMLファイルを作るためには、大きく分けて以下の3つのルールがあります。

  • HTMLで書く
  • ファイル名の最後に「.html」をつける
  • テキストエディタで書く

それぞれ順番に見ていきましょう。

HTMLで書く

大原則ですが、HTMLファイルの中身にはHTMLのコードを記述します。厳密にいうと、いろいろな書き方を用いることで、それ以外のコードを書くこともできるのですが、現時点では、HTMLファイルの中には、原則、HTMLのみを記述するという認識でOKです。

ファイル名の最後に「.html」をつける

HTMLをWebページに反映させるためには、まず、HTMLを書き込むためのHTMLファイルを作る必要があります。ファイルを作る方法は非常に簡単で、作りたいファイルの名前の後ろに「.html」と記述するだけです。

例えば、”index”という名前のHTMLファイルを作りたい場合は、ファイルの名前を「index.html」とすれば、”index”という名前のHTMLファイルが完成します。

ここでいう「.html」は、一般的に拡張子と呼ばれるもので、ファイルがどんな種類のものなのかをわかりやすくします。例えば、音声ファイルだったら「.mp3」とか「.wav」、動画ファイルだったら「.mp4」や「.mov」などがありますよね。これらも拡張子の一種です。

テキストエディタで書く

HTMLは、パソコンに標準で入っているメモ帳などでも書くことができるのですが、コードを記述する際は、テキストエディタと呼ばれるソフトを使用するのが一般的です。

テキストエディタは、コードを書くのに特化したメモ帳のようなもので、HTMLに限らず、いろんな言語の記述を色分けして見やすくしてくれたりします。動画では「Sublime Text」が紹介されていますが、他にも「Atom」や「Visual Studio Code」など、数多くのテキストエディタが存在しています。

筆者は、テックキャンプで「Visual Studio Code」を使用したので、それをそのまま使用していますが、特に機能などには大きな違いはないかと思いますので、自分の好きなテキストエディタを使用されると良いと思います。

おわりに

今回は、初級HTML第一弾ということで、Tech Academyの動画に沿って解説をしてみました。今後も本動画に沿って記事を更新していく予定ですので、引き続きお楽しみにして頂けると幸いです。

次の記事はこちら