まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説
超初心者向けに「HTMLの書き方」を解説した記事です。HTMLのタグの書き方から、ブラウザでの表示方法まで紹介しています。サンプルコードも用意しているので、まずは真似しながらコーディングしていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本記事では、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を書きながら体で覚えましょう。
各要素は、辞書のようなサイトや本で、調べながら読み書きできれば問題ありません。
常に調べながら書いていますよ。
今回のタグは、後で覚えてもいいんですね？
技術は常に移り変わるので、すぐに古くなってしまうためですね。
暗記するよりも、調べ方をマスターして、常に最新の技術を探るのがおすすめです。
調べるときはテックアカデミーの記事を参考にしますね！
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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デザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
