まずはここから!HTMLの書き方【初心者向け】

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

HTMLの基礎がわかったら、HTMLの書き方について覚えていきましょう。本記事は、初心者向けに、基礎となるHTMLの書き方を解説した記事です。

HTMLでは、文字列にタグで性格付けを施すことで全体を構造化していきます。

 

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。(動画は2つに分かれています)

 

タグの書き方

タグを書く際はまず「< >」を書き、その間に性格を指定する要素名を入れ、「<要素名>」を作ります。それをコピペして「< 要素名><要素名>」と、2つ並べます。(タグでは、基本的に半角記号を使います。間違って全角を使わなように、なるべくコピペして書きましょう)

それから、2つ目の「< >」に「/」を加え、「<要素名></要素名>」という形にします。このとき、「<要素名>」を開始タグ、「</要素名>」を終了タグといいます。

そして、文字列は、開始タグと終了タグのあいだに最後に書くようにしてください。

 

たとえば、文書のなかに見出しを作りたいときは、「hタグ(h=headerの意)」を使って次のように書くことができます。

<h1>HTMLの書き方</h1>

 

要素とは

HTML要素には、現在100を超える種類があります。代表的なものをいくつか紹介しましょう。

  • h1 – 見出し(h1,h2,h3,h4…と、数が大きくなるほど見出しは小さくなります)
  • a – リンク
  • p – 段落
  • ul,li – 箇条書き

 

なかには、開始タグのみでタグを作ることができるものもあります。

  • img – 画像を表示する
  • br – 改行
  • hr – 線を引く

 

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

属性と値

また、要素は、その特性や状態などを示すために属性を指定することもできます。属性は、開始タグの要素名の後に半角スペースで区切って書き入れ、さらに、その程度を値で調整することができます。

 

<要素名 属性 = “値” >

例えば、a(アンカー)タグでは下記のように記述します。

<a href="https://techacademy.jp/">TechAcademy</a>

 

HTMLを書いてみよう

これまでの書き方を踏まえて、実際にコードを書いてみます。

ここでは、テキストエディタに「mi」を使っています。

<!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>

一番上の<!DOCTYPE html>はドキュメントタイプといい、このHTMLファイルがどのバージョンを使って書かれているかを宣言するものです。これがないとHTMLファイルとして認識されないので、必ず書く必要があります。

ちなみに、<!DOCTYPE html>は、HTML5のバージョンを使っていることを意味します。

 

HTMLのタグは、基本的に入れ子構造です。タグのなかに別のタグを入れ、さらにそのなかに別のタグを入れ…といった具合に書き込んでいくことができます。

ロシアのマトリョーシカをイメージしていただくとわかりやすいと思います。

マトリョーシカ

コードを書いていくときは、入れ子構造が視覚的にわかりやすいように、階層に応じてスペースをあけて書くといいでしょう。(HTML上では、スペースは無視されます)

 

<head>と<body>

<html>の中身は大きく head と body の2つの要素にわけることができます。

HTML

 

<head>から見ていきましょう。

<meta charset=“UTF-8”>:メタ情報を示すもので、ここでは、このファイルの文字コードが UFT-8 であることを示しています。

<title>:このファイル自身のタイトルを示し、ブラウザ上ではタブの部分に表示されます。

 

次は<body>です。

<h1>:一番大きな見出しをあらわします。h2,h3,h4,…と数字が大きくなるほど、見出し文字は小さくなっていきます。

<p>:paragraph(パラグラフ)の p で、段落をあらわします。

 

 

 ブラウザで表示させてみよう

ここまでHTMLのコードが書けたら実際に保存して、ブラウザで表示させてみましょう。

保存

 

ファイル名に拡張子の「.html」をつけることで、HTMLファイルとして保存されます。

ドラッグ&ドロップ

 

これをブラウザにドラッグ&ドロップすることで、先ほど書いたHTMLソースがブラウザで表示されます。

ブラウザで表示

 

この際、<head>では、<title>がタブに表示されました。

<body>の中身はそのままタグに従ってブラウザに表示されます。

ブラウザで表示

 

また、テキストエディタの情報を更新してから、ブラウザを再読み込みするとブラウザ上の表示も変更されます。

試しに、次のように編集してみましょう。表示される内容が変わることがわかると思います。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLのタイトル</title>
  </head>
  <body>
    <h1>HTMLの書き方</h1>
    <p>はじめてのHTMLを作りました</p>
  </body>
</html>

 

テキストエディタでファイルを再度保存し、ブラウザをリロードしてください。

ソース変更

ブラウザ上で変更が反映されました。

このようにHTMLではタグを使ってソースを書き、ブラウザで表示させることができます。

 

これがHTMLの基本的な書き方です。

色付けなどもしたい人は、CSSの書き方も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。