まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説
超初心者向けに「HTMLの書き方」を解説した記事です。HTMLのタグの書き方から、ブラウザでの表示方法まで紹介しています。サンプルコードも用意しているので、まずは真似しながらコーディングしていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。
本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLについて解説した記事を読むとさらに理解が深まります。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
HTMLの書き方について詳しく説明していくね！
お願いします！
【動画でも解説しています。クリックで見る！】
HTMLタグの書き方
HTMLはWebページに表示したい情報に対し、マークアップするための文章構成を表現する言葉です。
たとえば、タイトルや見出し、本文といった区切りをHTMLでは記述できます。
HTMLはタグ＜＞で囲ったまとまりで、文章構成を表現することが可能です。
タグの中には、どのような種類の文章なのかを示す要素名を記述しましょう。
題名であれば<title>、見出しであれば<h1>、段落であれば<p>などです。
<title> のように要素名から始まるタグは開始タグと呼ばれます。
</title> のように、スラッシュ要素名で始まるタグは終了タグを意味し、要素の記述終了を示すものです。
開始タグと終了タグで囲むことで、開始と終了を表現します。
開始タグから終了タグまでのひとまとまりを要素と呼びます。
図の<title>要素はWebページの題名を示すタグであり、この場合、Webページの題名は「タイトル」になります。
要素とは
HTML要素には、現在100を超える種類があります。
Webページで表現したい内容によって適切な要素を選び、タグで囲わなければなりません。
代表的なものをいくつかみていきましょう。
<p> – 段落
paragraph（パラグラフ、段落）の略です。
改行のない文章のひとかたまりを示すために使用します。
文章を改行したいときは、改行のタイミングごとに複数のp要素を作ることで改行が可能です。
<h1>要素
headline（ヘッドライン、見出し）の略です。
以下のように見出しの大小を表現するために使用します。
- 大見出しはh2
- 中見出しはh3
- 小見出しはh4
<a>要素
anchor link （アンカーリンク、リンクの起点）の略です。
他のHTMLなどへのリンクを表現するために使用します。
青文字でアンダーラインのあるリンクの見た目になります。
<div>要素
division （ディビジョン、仕切り）の略です。
四角い枠を作って、様々な要素をひとまとめにします。
<img>要素
image（画像）のことです。
画像ファイルを指定し、画像を埋め込みます。
image要素を始めとするいくつかの要素は、開始タグのみで動作し、終了タグは必要ありません。
<meta>要素
meta（大局的な情報）のことです。
Webページの全体的な設定をします。
文字の種類や検索エンジンの検索結果に表示される文章など、様々な項目があります。
属性と値
各要素の細かい動きや働きを設定するための付属情報が属性です。
何の設定かを示すものが属性名、どう設定するかを属性値といいます。
開始タグの＜＞の中、要素名の後にスペースを空けて、属性名=”属性値” の形で記述します。
上記はmeta要素と呼ばれるWebページ全体の設定をするタグです。
charset （キャラクターセット= 文字の種類）をUTF-8という種類の文字に設定しています。
この要素ではこの属性が必要といったように、要素と属性はセットのものが多い傾向です。
たとえば、以下のように記述したうえでTechAcademyという文字をクリックするとtechacademy.jpに飛ぶリンクになります。
<a href="https://techacademy.jp/">TechAcademy</a>
<a>要素のリンク先URLを、href (ハイパーテキストリファレンス= HTMLの参照先)という属性に設定しています。
以下の記述は、<img>要素で表示するファイルをsrc（ソース = 情報の源泉）という属性に設定しているものです。
<img src="/image.png">
要素と属性、ぜひ組み合わせて理解してくださいね！
タグは全部覚えなければダメなんですか？
要素は覚える必要はありません。文法はHTMLを書きながら体で覚えましょう。
各要素は、辞書のようなサイトや本で、調べながら読み書きできれば問題ありません。
常に調べながら書いていますよ。
今回のタグは、後で覚えてもいいんですね？
技術は常に移り変わるので、すぐに古くなってしまうためですね。
暗記するよりも、調べ方をマスターして、常に最新の技術を探るのがおすすめです。
調べるときはテックアカデミーの記事を参考にしますね！
HTMLを書いてみよう
これまでの書き方を踏まえて、実際にコードを書いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの書き方</title>
</head>
<body>
<h1>HTMLの書き方</h1>
<p>はじめてのHTMLを作りました</p>
</body>
</html>
以下ではサンプルコードを解説していきます。
<!DOCTYPE html>はHTMLを示すもの
文頭にある<!DOCTYPE html>は、文章がHTMLであることを示しています。
この記述がなければ、WebブラウザがWebページとして表示できないため必要です。
HTMLの種類によっていくつか書き方のバリエーションはあるものの、今は<!DOCTYPE html>が基本です。
要素の階層構造
要素は、開始タグと終了タグの間に、テキストと他の要素を含めることができます。
以下の例では<body>要素内に<h1>要素と<p>要素を含むものです。
<body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body>
また、以下のように、要素の中に要素を入れる段階構造を入れ子といいます。
HTMLは、様々な要素を入れ子にしていくことでWebページを構成しています。
<head>と<body>
<html>の中身は大きく head と body の2つの要素に分けることが可能です。
<head>要素の中にはWebブラウザ上に表示されない設定やページ情報を記述します。
<head> <meta charset="UTF-8"> <title>HTMLの書き方</title> </head>
<meta charaset=”UTF-8″>は、文字の種類をUTF-8という種類に設定しています。
<title>HTMLの書き方</title>はWebページの題名を設定するものです。
<body>要素の中には、Webブラウザに表示し、ユーザーに見てもらうための情報やコンテンツを記述します。
<body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body>
<h1>HTMLの書き方</h1>は大見出しを表示しています。
<p>はじめてのHTMLを作りました</p>は、段落として文章を表示するための記述です。
ブラウザで表示させてみよう
ここでは、これまで記述したコードをブラウザで表示させていきます。
ファイル名に拡張子の「.html」をつけることで、HTMLファイルとして保存されます。
これをブラウザにドラッグ&ドロップし、先ほど書いたHTMLソースをブラウザで表示可能です。
<title>がタブに表示され、<body>の中身はタグに従ってブラウザに表示されます。
また、htmlファイルの内容を更新し、ブラウザを再読み込みした場合はブラウザ上の表示も変更されます。
では、以下のように編集してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの書き方のタイトル</title>
</head>
<body>
<h1>HTMLの書き方</h1>
<p>はじめてのHTMLを作りました</p>
</body>
</html>
テキストエディタでファイルを再度保存し、ブラウザをリロードした場合、変更が確認できます。
上記のように、HTMLだけでは、味気ないWebページになってしまいます。
HTMLは情報に意味付けを行い、文章の構成を表現する言葉や見た目を作るのはCSSの役目です。
HTML全体の書き方がわかりました。見た目があまり好きではないのですが、titleタグやhタグは何のために書くんですか？
ページにアクセスしてきてくれた人のブラウザや検索エンジンに正しく解釈してもらうために書くんだよ！
検索エンジンに対しても意味があるんですか？
そうだね。titleタグはページのタイトル、hタグはページの見出しとして解釈されるから大切だよ。
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
