WEBサイト制作において欠かせないのがHTMLです。
プログラミング学習において入門的な存在のHTMLですが、プログラミング初心者の場合、
・HTMLがそもそも何かよくわからない
・HTMLで何ができるか知りたい
と悩んでしまう方も多いのではないでしょうか。
そこで今回はプログラミング初心者の方に向けて、HTMLの基礎知識についてまとめました。
これからHTMLを学ぼうと思っている方や、HTMLの学習を始めたけどよくわからないという方は参考にしてみてください。
目次
HTMLって何？
HTMLとはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の頭文字をとったもので、WEBページを作成するための基礎言語（マークアップ言語）のこと。
テキストにテキスト以上の意味（ハイパーテキスト）を持たせて、目印（マークアップ）をつけた言語という意味です。テキストに目印をつけることで、どこが見出しでどこがリンクなのかをコンピュータに伝えることができるようになります。
ハイパーテキストを使うことで、クリックすると別ページへ移動するリンクをはったり、画像・音声・動画などのデータファイルを埋め込むことができるようになります。
HTMLが使われているもの
HTMLが使われているものはどんなものがあるでしょうか。代表的なものを3つご紹介します。
WEBサイト
いつも私たちがブラウザで見るWEBページのほとんどは、HTMLで作成されています。
もちろんこのブログの記事もそうです。実際にHTMLが見てみたいという方は、右クリック→検証や、F12キーを押してみてください。表示された画面はソースコードと呼ばれ、このブログがどんなHTMLで構成されているかわかります。
HTMLを記述することで、ブラウザから見た時にWEBサイトが表示されるのです。
HTMLメール
通常のテキストだけの簡素なメール以外に、画像やリンクなど装飾のついたメールを見たことがあるのではないでしょうか。
実はそのメールにはHTMLが使われています。HTMLを使うことで、テキストだけでは実現できなかった様々な装飾やレイアウトが可能になるのです。
WEBアプリ
通常iOSやAndroidなどのスマホアプリには、SwiftやJavaなどのOSに合わせた言語で作られるのが一般的です。
ですが、HTMLやCSSやJavascriptなど、WEBサイト制作に必要な技術を組み合わせることでWEBアプリを作ることもできます。
どちらのOSでも動作するため別々の言語で開発する必要がなく、コストを抑えたアプリ開発が可能になるのです。
HTMLを構成する用語
HTMLを構成する用語に、タグ・要素・属性があります。それぞれどういう意味を持っているのか、例をまじえながらご紹介します。
タグ
タグとは、テキストに意味を与える印のようなものです。<>でタグ名を囲うことで、どんな意味なのかを表現しています。
<タグ名>記述</タグ名>
のように使います。以下の例の場合、<h1></h1>で囲まれた部分が見出しであることを表現しています。
|
1 |
<h1>ここが見出しです</h1> |
上記の<h1>タグのように、タグには
・開始タグ「<タグ名>」と終了タグ（閉じタグ）「</タグ名>」が必要なもの
・終了タグが不要なもの
があります。
よく使うタグの中から、終了タグが必要なタグ・不要なタグを一部ご紹介します。
終了タグが必要なタグ
<body>
<div>
<p>
<footer>
<section>
終了タグが不要なタグ
<br>
<hr>
<img>
<input>
要素
要素とは、タグで囲まれたテキスト部分を含めた全体を表します。
例えば以下の場合、
|
1 |
<h1>ここが見出しです</h1> |
<h1>がタグで、<h1>～</h1>全てが要素になります。
HTMLには、head要素やbody要素などページ全体の構成を決めるものや、h1要素やp要素など細かいパーツを決める要素などがあります。
属性
属性とは、タグごとに指定できる設定のようなものです。
<タグ名 属性=”属性値”>のように記述します。
例えば<a>タグの場合、囲まれた部分がどこへリンクするのか、href属性でリンク先を指定することができます。
以下の例の場合、Googleのトップページへリンクしています。
|
1 |
<a href="https://www.google.com/">Googleトップページ</a> |
HTMLの構成
用語がわかったところで、実際にHTMLがどのような構成になっているか見ていきましょう。
DOCTYPE宣言
HTMLはまず最初に以下のようにDOCTYPE宣言をすることで、このファイルはHTML文書を記述しますということを表現しています。
|
1 |
<!DOCTYPE html> |
DOCTYPE宣言部分を変更することで、HTMLのバージョンを変えることもできます。HTML5は上記のようなシンプルな記述になります。
また、HTMLで作られたファイルは拡張子を「.html」や「.htm」にする必要があります。
使う言語の指定
WEBページがどの言語で書かれているかを指定します。以下の場合、日本語のWEBページになります。
|
1 |
<html lang="ja"> |
他の言語にしたい時は「ja」の部分を変更します。例えば、「en」で英語のWEBページ、「zh」で中国語のWEBページという意味になります。
<head>要素
<head>要素には、HTML文書自体の様々な設定内容が入ります。指定する際には<head>～</head>の中に記述していきます。
例えば、ブラウザのタブ部分に表示されるページ自体のタイトルは以下のように記述します。
|
1 |
<title>タイトル</title> |
以下のように記述すると、そのHTML文書がどんな文字コードで書かれているかを指定できます。
|
1 |
<meta charset="utf-8"> |
この場合、このHTML文書はUTF-8という文字コードで書かれていますと宣言しています。他にも「Shift_JIS」や「EUC-JP」などがありますが、一般的に使われるのは「UTF-8」が多いです。
<head>要素の中身は、WEBページの見た目に現れるものではなく、表には見えない設定の記述がほとんどです。
<body>要素
<body>要素には、ブラウザに表示されるWEBページがどんな構成になっているかが記述されています。
例えば、
| <h1> | 見出し |
|---|---|
| <img> | 画像 |
| <table> | テーブル |
のように、WEBページの見た目を構成しています。
HTMLを動作させるために必要なもの
テキストエディタ
テキストエディタは文字を入力できるソフトで、メモ帳として使ったり簡単な文書を作ることができます。
PCに初期から入っているものとして、Windowsの場合「メモ帳」、Macの場合「テキストエディット」があります。
実はHTMLはテキストの記述さえできればいいので、「メモ帳」や「テキストエディット」でも作ることができます。
ただし、プログラミングをするには少し不便なので、プログラミングに適したテキストエディタを使用するのがいいでしょう。
以下の記事では、プログラミング初心者におすすめなテキストエディタをご紹介しています。テキストエディタ選びに悩んでいる方は参考にしてみてくださいね。
プログラミングにおすすめの人気無料エディタ7選【初心者向け】
ブラウザ
テキストエディタで書いたHTMLが「実際にどのように表示されるのか」を確認するためにブラウザが必要になります。
Windowsの場合「Microsoft Edge」、Macの場合「Safari」がPCに初期から入っているのですぐに確認できますね。
プログラミングの場合、色々な拡張機能が便利なGoogle Chromeがよく使われています。
インストールも簡単なので、プログラミングをする場合はPCに入れておくのをおすすめします。
まとめ
以上、HTMLの基礎知識について、
・HTMLが使われている代表的なもの
・HTMLを構成する要素
・HTMLを動作させるために必要なソフト
からご紹介しました。
HTMLの意味や、HTMLで何ができるかがおわかりいただけたのではないでしょうか。
また、ウェブカツでは仮入部（無料）でHTML・CSSの基礎が学べます。
必要な部分だけを効率よく学べるので、HTMLの学習を始めたばかりの初心者の方はぜひチェックしてみてくださいね。
