【初心者向け】HTMLの基礎学習～Ruby on Railsスキルセット～

2021.05.06

HTML（HyperText Markup Language）は、ウェブページを作成するために開発された言語であり、現在インターネット上で公開されているウェブサイトはほぼすべてHTMLで開発されています。

今見ているこのブログもHTMLにより開発されています。

「右クリック」　→　「検証」を押すと、このページのHTML言語を見ることができます。

HTML表示方法（検証をクリックする）
Webサイト内のHTML確認

このようにHTMLはインターネットが当たり前になったこの時代において、必須言語であります。本記事では、HTMLがどんなものか、HTMLの簡単な記述ルールをご紹介します。

目次

HTMLを学習する準備

HTMLを書くとき（プログラムを書くとき）エディターを使います。本ブログ内ではエディターとして VS codeを使用しています。VS codeのインストール方法は以下にまとめてあるので、まだインストールされていない方はご確認ください。

【初心者向け】VS code（Visual Studio Code）のインストール・設定方法
プログラムを書く際に必要なエディターのご紹介です。プログラムを書く際はエディターを使用します。世の中には様々なエディターがあり、ご自身のお好みエディターがすでにあれば、そちらをお使いいただけばと思いますが、なければマイクロソフト社...
nakoblog.info
2021.04.24

エディターを開いてコードを書く準備が出来ましたか？準備ができた方は、HTMLの基礎を学んでいきましょう！

HTMLの基礎

まず初めに、HTMLの基本的な考え方を説明します。以下2点を覚えましょう。

  • HTMLには開始タグ（start tag）と終了タグ（end tag）が存在する
  • HTMLで使うタグにはいろいろな種類がある

HTMLには開始タグ（start tag）と終了タグ（end tag）が存在する

HTMLは以下のように書くのが基本です。

<h1>タイトル</h1>

<○○>：開始タグ
</○○>：終了タグ

と呼ばれ、開始タグと終了タグの間には表示させたい文字を入れます。大事なことなのでもう一度言いますが、「HTMLは開始タグと終了タグの間に表示させたい文字を入れます」。

HTMLで使うタグにはいろいろな種類がある

覚えること2つ目は「タグにはいろんな種類がある」です。先ほどは、タイトルを作成するときに使う「h1」タグで囲んだ例を見せましたが、HTMLには他にも様々な種類のタグがあります。ここでは代表的なものをいくつかご紹介します。

h1, h2, h3, h4, h5, h6タグ

先ほど例を挙げた「h1」タグを含め、「h1, h2, h3, h4, h5, h6」タグはタイトルを作成する際に使うタグです。タイトルを作りたいとき、文字をh1タグなどで囲むことでタイトルを作ることができます。

<h1>タイトル</h1>

1~6まで数字がありますが、小さくなるほど小見出しのタイトルになっていきます。h1タグは大見出しであり、SEO的にページ内でなるべく1つにすべきなどとも言われていますね。（近年では複数入れていてもOKといわれたり、真実はよくわかりませんが）

「h1, h2, h3, h4, h5, h6」タグはタイトル・見出しに使います。

pタグ

pタグはparagraphのpから来ており、文章を囲むタグです。タイトルを「h1, h2, h3」タグで作り、その説明文などをpタグで作るのが一般的です。以下に例を示してみましょう。

<h1>見出し</h1>
<p>ここには本文を書きます。本文です。</p>

このように、「p」タグは文章を囲むタグです。

divタグ

「div」タグは万能タグです。一般的に、タイトルと文書をひとまとめにするために「div」タグで囲んだりします。以下に例を示してみます。

<div>
  <h1>タイトル</h1>
　<p>ここには本文を書きます。本文です。</p>
</div>

このようにして、先ほど書いた、「h1」タグと「p」タグを囲んであげることで、一まとまりのブロックとして扱うことができます。「div」タグを多用するな！というまとめサイトも見ます（参考：https://techacademy.jp/magazine/28724）が、私はあまり信じておりません。確かに、「div」タグばかり使ってしまうと、構造が見えづらくなってしまいますので、むやみやたらに使うことは避けましょう。ただ、使うことを敬遠する必要はなく、普通に多用してOKです。

「div」タグは万能タグです。

table, th, td, trタグ

「table」, 「th」,「td」, 「tr」タグは表を作るときに使うタグです。「table」タグで囲んだ領域内に「tr」タグで行をつくり、「th」タグがタイトル、「td」タグが本文といった形で表をつくります。以下にお試しコードを書いていますのでご覧ください。

<table>
  <tr>
    <th>タイトル</th>
　　<td>本文</td>
  </tr>
</table>

このような構造にすることで、ウェブページ上に表を作成することができます。いくつか「th」タグや「td」タグを増やして、カスタマイズしてみてください。

改めて、「table」, 「th」,「td」, 「tr」タグは表を作るときに使うタグになります。

いかがでしょうか、HTMLの基礎が少しわかってきたでしょうか。上記で示したように、HTMLで使われるタグには様々な種類があります。それぞれのタグの意味は使っているうちに覚えて行きますので、ここでは「HTMLには様々なタグがある！」とだけ覚えておけばいいかなと思います。

＋α　ウェブページの全体構造（HTML）

HTMLには様々なタグがあるということが分かったところで、ウェブページがどんな構成で成り立っているのか、基礎的なお話をしてみます。

以下に示すのが、実際のWebページの全体構造になります。

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
    </head>
    <body>
    //
    </body>
  </html>
<!DOCTYPE html>宣言

Webサイトの始めには変わったタイプのタグが配置されています。これは、DOCTYPE宣言（文書型宣言）とよばれ、ブラウザに情報を伝えるためのいわば”おまじない”的な宣言です。<!DOCTYPE html>は必ず書くものだ！とだけ覚えておけばＯＫです。

HTML要素（<html>~</html>）

DOCTYPE宣言以外のすべてのタグは、「html」要素内に配置します。ウェブページを作成するときは、必ず書きましょう。

head要素とbody要素

「html」要素をかいたら、その子要素には「head」要素と「body」要素を入れます。「html」要素に直接入れることができる要素は、「head」要素または「body」要素の2つだけでそれ以外の要素を入れることは出来ません。

  • 「head」要素

「head」要素には、Webページの情報を入れることができます。タイトル情報やcssファイルのURL、javascriptプラグインの情報なども入れることができます。「head」要素内に書いた情報は、直接Webサイトに表示されない情報を入れます。

  • 「body」要素

対して、「body」要素はブラウザ上で表示させたい情報を入れます。ブラウザ上のコンテンツ内容としてWebサイトに表示されるのは、「body」要素の中に入れられた内容のみであり、先ほどまで勉強した、「h1」タグや「p」タグを使った文章は「body」要素内に入れます。

+αとして、Webページがどのような構成で成り立っているのかご説明しました。Webページ内に記述されるHTMLの全体構成は頭の片隅に入れておけばOKです。「body」要素内にコンテンツを書いていくということだけ覚えておきましょう。

まとめ

HTMLがどんなものがご説明しました。大切なこと、今回覚えてほしいことは以下2つ。

  • HTMLには開始タグ（start tag）と終了タグ（end tag）が存在する
  • タグにはいろいろな種類がある

これさえ覚えておけば、Webサイトを作り始めることができますし、HTMLは書けたも同然です。そこまで難しくなかったのではないでしょうか？

最低限の知識はつけられたので、HTML学習は終了です。今回ご紹介したタグ以外にも様々なタグがありますが、それらタグは、実践の中で覚えて行きましょう！お疲れ様でした。

Ruby on Railsに興味を持っている方は以下の記事もご覧ください。

【初心者向け】Ruby on Rails アプリ開発ロードマップ

プログラミング勉強方法は以下の記事にまとめています。

【初学者向け】プログラミングの勉強方法をまとめていこうと思います

コメント

タイトルとURLをコピーしました