HTMLの基本。基本構造やタグの使い方をわかりやすく解説。
私たちが日頃から閲覧しているWebサイトのほとんどが、HTMLというマークアップ言語によって作られています。Webサイトやアプリの制作にあたって、HTMLは必修ともいえる言語です。HTMLの基本構造やタグの使い方を詳しく解説します。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
HTMLの基本を知ろう
私たちは普段からスマートフォンやパソコンを使って、さまざまなWebサイトを見ています。実はWebサイトの8割近くが『HTML』というプログラミング言語を使って制作されているのをご存じでしょうか？Webエンジニアを目指すなら、HTMLへの理解は欠かせません。
HTMLを理解するにあたって、まずはHTMLがどういったものなのか、基本的な概要や使用例について知っておきましょう。
HTMLとは？
HTMLとは『Hyper Text Markup Language』の頭文字をとった言葉です。『Hyper Text』と『Markup Language』という二つの言葉から成り立っています。
順番に解説していきましょう。『Hyper Text』とは、「ハイパーリンクが挿入できるテキストのこと」です。ハイパーリンクとは、クリックすることで別のページへ移動する仕組みのことで、単純に『リンク』と呼ばれることもあります。
『Markup Language』は、日本語で「マークアップ言語」と訳します。マークアップ言語とは、文章を構造化したり、文字の装飾を施したりするための機能です。
HTMLは『Hyper Text』と『Markup Language』の2つの機能を合わせ持っています。
HTMLを活用することで、コンピュータはさまざまな情報を読み込み、人が読むのに最適なWebページを表示しています。
HTMLの使用例
HTMLは、身近なところでたくさん使われています。
その中で主流となっているのがWebページの制作です。
他にも、電子メールの文書やスマホアプリでHTMLは利用されています。メール内からWebページに飛べるようにリンクを貼ったり、画像を表示したりするのはHTMLの機能によるものです。
またHTMLは、scriptというタグを使ってJavaScriptを読み込むことができます。これによって、Web上で動くアプリケーションを開発することも可能です。
IT業界への転職成功率98%のプログラミングスクール【DMMWEBCAMP】3つの特徴！
✔最短3ヶ月でITエンジニアへ！
✔受講者の97%が未経験！
✔転職成功後の離職率は驚異の2.3%！
まずは無料でプロのカウンセラーにキャリアの悩みを相談！
＼参加者の満足度は99%／
HTMLの基本構造を理解しよう
HTMLには記述する際のルールが決められており、このルールを守ることがコーディングを行う上で非常に重要です。
タグや他言語を読み込むための命令文など細かいルールはいくつもありますが、まずは構造を理解しましょう。
HTMLファイルは、必ず次のような形で記述しなければなりません。
| <!DOCTYPE html> <html> <head> HTMLドキュメント自身の情報 </head> <body> 文章の内容が表示される </body> </html> |
それぞれにどんな意味があるのかを詳しく解説します。
DOCTYPE宣言
HTMLには、さまざまなバージョンがあります。主流となっているのは2008年に公開された『HTML5』ですが、既に廃止されており、今後は”HTML Living Standardが主流になるといわれています。DOCTYPE宣言とは、HTMLのバージョンが何であるのかを宣言するために用います。
バージョンによって、DOCTYPE宣言の記述方式は異なります。例えば、『HTML 4.01 Frameset』の場合は下記です。
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> |
HTML5では、以下のように記述します。
<!DOCTYPE html>
これで「このHTML文章はHTML5を用いて書かれたものです」ということを示しているのです。この宣言は、HTMLを書き始める最初の行に記述します。
html要素
『html要素』とは、この文書がHTMLによって記載されていることを示すものです。
| <html>～</html> |
という囲い方をします。「～の中がHTMLで書かれている」ということを表しています。
このhtml要素では、言語を指定することができます。例えば<html lang=”ja”>と記載すれば、それはファイルの内容が日本語であることを示しているのです。
他の言語を使うときは、以下のような値を埋め込みます。
- 英語：en
- アメリカ英語：en-US
- 中国語 ：zh
- イギリス英語 ：en-GB
- フランス語 ：fr
head要素
head要素とは、文書のヘッダ部分の指定に使う要素です。文書のタイトルや文字コードなど、htmlファイルの情報を宣言するために用います。代表的なhead要素には、以下のようなものがあります。
- <meta要素>…文字コードや作者の名前、サイトの概要などを記述する
- <title要素>……ページのタイトルを表示する
- <link要素>……ファイルと外部のリソースを関連付ける
- <script要素>…HTML以外で記載されたコードやデータを埋め込む
<title要素>を除いて、基本的にはブラウザに表示されることはありません。
body要素
body要素は、文書の内容を表します。Webサイトで表示される文字や画像、リストや表などの目に見える要素の多くは、このbody要素の中に記述するのがルールです。
body要素は、
| <body>～</body> |
という形で記述します。bodyは一つのhtmlファイルにつき、一つしか記述することができません。
基本的な文書を書くためのタグ
bodyの中には、サイトのデザインや文章に関するさまざまな要素（タグ）が指定できます。body内ではどのようなタグを用いるのでしょうか。まずは文章を書くための基本的なタグについて把握しましょう。
hタグ（見出し）
『hタグ』は、見出しを作るために用いられます。hは「Heading」の略です。hの後につける数字が大きいほど、小さい見出しになります。
- <h1>タイトル</h1>
- <h2>大見出し</h2>
- <h3>中見出し</h3>
- <h4>小見出し</h4>
といった使い方をします。hタグは、目次の表示をスマートにするだけでなく、Googleのクローラーがサイトを巡る際に、階層をわかりやすくして、記事を読みやすくするためにも用いられます。
一番大きな見出しには<h1>が用いられますが、h1にはタイトルを設定しているWebサイトも多く、この場合は記事内の大きな見出しは<h2>から用いられるのが一般的です。
pタグ（段落）とbr（改行）
普通に文書を書く場合とは違い、html内では改行するだけでは、コンピュータがそれを改行箇所と認識してくれません。
そこで用いられるのが段落を分ける『pタグ』と、改行する『br』タグです。この二つのタグは、文書内では高頻度で用いられます。
| <p> こんにちは。<br> 昨日はごちそうさまでした。今度はこちらがごちそうしますね<br> 〇〇より </p> |
同一の段落は<p>～</p>で囲み、改行したい場合は文末に<br>と記載します。
文字を装飾するタグ
文章を装飾するさまざまなタグを紹介します。
| <u> ～</u> | アンダーラインを引く |
| <strike>～ </strike> | 打ち消し線を引く |
| <em> ～</em> | 文字を強調する |
| <strong>～</strong> | 文字をさらに強く強調する |
| <big> ～</big> | 文字を大きくする |
| <small> ～</small> | 文字を小さくする |
代表的なものとしては上記が挙げられます
国内最大級の転職サポート型プログラミングスクール【DMM WEBCAMP】では、未経験者が97%！
✔転職のキャリアサポート満足度は92%！
✔講師に質問し放題！日々の学習を徹底サポート！
✔転職成功後の離職率は驚異の2.3%！
まずは無料でプロのカウンセラーにキャリアの悩みを相談！
＼参加者の満足度は99%／
文書以外の機能タグ
続いては画像の挿入や他ページへのリンクの挿入など、bodyタグ内で使う文書以外の機能を用いるタグを紹介します。
画像を挿入する
画像を挿入するには『img』タグを用います。imgタグは、次のような書き方をします。
| <img src=”画像ファイル名.形式”> |
imgタグで用いることができるのは、JPGやPNGといった画像形式のファイルのみです。動画や音楽、レイヤーが多重階層になっているPDFを貼ることはできません。
また、画像の大きさやサイズ、透明度を指定するために以下のような属性をつけることができます。
| alt | 画像の説明を記載する |
| width, height | 画像の縦横サイズを指定する |
| border | 画像周囲の枠線の太さを指定する |
| opacity | 画像の透明度を指定する |
他ページへのリンクを貼る
他ページへのリンクを貼る場合は、『aタグ』を用います。aは「Anker」の略です。
| <a href=”ジャンプ先のサイトのURL”>～</a> |
という形で記載します。
aタグをつけたテキストは青文字でアンダーバーが引かれるといったように、フォントの装飾がなされます。この装飾は、aタグ内に属性をつけることで変えることも可能です。
- <a href=”~”>通常の文字</a>
- <a class=”noline” href=”~”>アンダーバーを消す</a>
2は「noline」というクラスを与えることで、アンダーバーを消しています。
ですが、上記のように、対象となる言葉すべてに属性をつけるのは手間ですし、コードも見にくくなってしまいます。そうした場合はCSSを用いることで、ページ内の全てのaタグに反映させることが可能です。
表とリストを挿入する
表を作る場合は『table』というタグを使用します。具体的な書き方は以下の通りです。
| <table border=”1″> <tr> <td>食べ物の種類</td> <td>名前</td> <td>値段</td> </tr> <tr> <td>くだもの</td> <td>りんご</td> <td>100円</td> </tr> <tr> <td>野菜</td> <td>きゅうり</td> <td>70円</td> </tr> </table> |
上記の場合、以下のようなテーブルが作成されます。
| 食べ物の種類 | 名前 | 値段 |
| くだもの | りんご | 100円 |
| 野菜 | きゅうり | 70円 |
<td>が列、trが行を表しています。
また、リスト（箇条書き）には、以下のような種類があります
| <ul> ～</ul>…番号なしリスト <ol> ～</ol>…番号つきリスト |
用途に合わせて選びましょう。
デザインを変えるdivタグとspanタグ
ここまで紹介してきたタグとは異なり、divタグとspanタグは、つけたところで見た目には何の変化もありません。しかしこの二つのタグは、サイトのデザインを変える上で重要な役割を担っています。
それぞれのタグの役割と違いについて解説します。
divタグ・spanタグの役割
divタグとspanタグは、文章をグループ化するときに使います。
例えば、divタグは以下のように使います。
| <div class = “1”> <p>おはようございます。</p> <p>気持ちの良い朝ですね。</p> </div> <div class = “2”> <p>急ぎましょう。</p> <p>遅刻しますよ。</p> </div> |
表面上には何の変化もありませんが、内部的にはクラスを1と2の二つのグループに分けています。例えば、CSSによる文書デザインの変更は本来なら文書全体に及んでしまいますが、グループを分けることで、それぞれのグループに別々のデザインを指定できるようになります。
spanタグの場合は、以下のように用います。
| 今日は<span class = “1”> りんご </span>が食べたい。 |
このようにすると、「りんご」という文字のデザインのみにクラス1のルールを適用することができます。
2つのタグの違いは？
divタグとspanタグは役割は同じですが、対象が違います。divタグがまとまった文章に入るのに対し、spanタグは文章の中の文字に対して使います。divタグを用いた場合、文章の高さと幅を指定できますが、spanタグではできません。
また、divタグを用いた場合は、前後に強制的に改行が入ります。段落ごとに装飾したい場合はdivタグ、特定の文字のみを装飾したい場合はspanタグを使うと覚えておくといいでしょう。
コメントアウトの書き方と注意点
プログラミング言語を用いる上でコメントアウト（処理されない記述）はとても重要です。その部分に関するメモとして使われるため、他のプログラマーと情報共有や引き継ぎをする際に用います。
コメントアウトの方法は、プログラミング言語によって異なります。HTMLではどのようにコメントアウトを残すのか、注意点とともに紹介しましょう。
コメントアウトの書き方
HTMLでコメントアウトを用いる場合、「<!–– 」と「––>」で囲みます。具体的には以下のように記述します。
| <!– この文は表示されません –> 複数行をコメントアウトする場合も同様です。 <!– 〇〇さんへ この部分は削除してもらってOKです –> |
コメントアウトの注意点
コメントアウトの記述にあたり、いくつか注意点があります。
第一に、入れ子構造にはできないという点です。
| <!– コメント1 <!– コメント1-1 –> コメントアウト2 –> |
このように記述した場合、3行目の「–>」でコメントアウトが終了してしまい、4行目以下がそのままWebサイトに表示されてしまいます。
また、コメントアウト内の文章では「-（ハイフン）」を使わないようにしましょう。コメントの解釈と終了されてしまうブラウザがあるのに加えて、CMSによっては「―（ダッシュ）」に自動変換されてしまいます。
HTMLを使いこなしてWeb上で文書を作成する
Webサイトの作成から始まり、フォームやショッピングサイトなどの動的なアプリケーションを作成する場合でも、HTMLに対する理解が必要です。
HTML自体の難易度はそこまで高いものではありません。HTMLを自在に使いこなし、自分のイメージ通りのWebサイトを作成しましょう。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
