まずはここから!HTMLの書き方【初心者向け】現役デザイナーが解説

超初心者向けに「HTMLの書き方」を解説した記事です。HTMLのタグの書き方から、ブラウザでの表示方法まで紹介しています。サンプルコードも用意しているので、まずは真似しながらコーディングしていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。

目次

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

HTMLの書き方について詳しく説明していくね!

大石ゆかり

お願いします!

 

【動画でも解説しています。クリックで見る!】

 

HTMLタグの書き方

HTMLはWebページに表示したい情報に対し、マークアップするための文章構成を表現する言葉です。

たとえば、タイトルや見出し、本文といった区切りをHTMLでは記述できます。

 

HTMLはタグ<>で囲ったまとまりで、文章構成を表現可能です。

タグの中には、どのような種類の文章なのかを示す要素名を記述しましょう。

題名であれば<title>、見出しであれば<h1>、段落であれば<p>などです。

 

<title> のように要素名から始まるタグは開始タグと呼ばれます。

</title> のように、スラッシュ要素名で始まるタグを終了タグを意味し、要素の記述終了を示すものです。

開始タグと終了タグに囲むことで、開始と終了を表現します。

開始タグから終了タグまでのひとまとまりを要素と呼びます。

図の<title>要素はWebページの題名を示すタグであり、この場合はWebページの題名は「タイトル」になります。

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

要素とは

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を書きながら体で覚えましょう。

各要素は、辞書のようなサイトや本で、調べながら読み書きできれば問題ありません。

常に調べながら書いていますよ。

大石ゆかり

今回のタグは、後で覚えてもいいんですね?

田島悠介

技術は常に移り変わるので、すぐに古くなってしまうためですね。

暗記するよりも、調べ方をマスターして、常に最新の技術を探るのがおススメです。

大石ゆかり

調べるときはTechAcademyの記事を参考にしますね!

 

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つの要素に分けることが可能です。

HTML

<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の役目です。

 

執筆してくれたメンター

田屋 貴祥

最新テクノロジーを広めるという情熱を持ちクラウドベンダーでセールスエンジニアに従事。

その後、フリーランスWeb制作をしながら、海外で人生の楽しみ方を学ぶ。

海外のWeb制作Tipsを翻訳し実践し、日々新しいテクニックを研究しています。

最近はNuxtでJAMStack、CSSはブロークングリッドやシネマグラフ、グラスモーフォリズムが好き。

 

大石ゆかり

HTML全体の書き方がわかりました。見た目があまり好きではないのですが、titleタグやhタグは何のために書くんですか?

田島悠介

ページにアクセスしてきてくれた人のブラウザや検索エンジンに正しく解釈してもらうために書くんだよ!

大石ゆかり

検索エンジンに対しても意味があるんですか?

田島悠介

そうだね。titleタグはページのタイトル、hタグはページの見出しとして解釈されるから大切だよ。

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!