HTMLの書き方や基本文法をサンプルコードを交えながら解説

このページでは、具体的なHTMLの書き方について紹介します。

こちらのページの始めの方でも説明した通り、HTMLファイルはタグを組み合わせて作成します。

タグとは検索エンジンにこれが段落、これが画像という感じでサイトの内容を認識させるためのものです。

タグは基本的に次のような書き方をします。

<開始タグ>内容</終了タグ>

左に<と>で開始タグを囲い、右に<と/、>で終了タグを囲います。

<、>、/は全て半角入力してください。

さらに、開始タグと終了タグの間に内容を書きます。

内容というのは今あなたが閲覧しているこうしたサイトの文章などのことです。

基本的には「内容」の部分が、ブラウザでサイトを見た時に表示され、<開始タグ>や<終了タグ>の部分は表示されません。

具体例を挙げます。
以下のような場合、が開始タグ、「HTML入門」が内容、が終了タグとなります。

HTML入門

開始タグや終了タグを書き忘れると、ブラウザで表示されなかったり、表示のされ方が変になったりする場合がありますので注意して下さい。

一方、タグによっては開始タグしかないタグもあります。

このようなタグを「空要素」といいます。

空要素には先ほど挙げたような終了タグがありません。

空要素に該当するタグの具体例としては、

などがあります。

これらは上記のような書き方をしますので、

のようには書きません。

HTMLサンプルコードの意味を各行それぞれ説明

こちらの記事で簡単なHTMLファイルの作成と、作成したファイルをブラウザで表示させる方法で紹介したタグの意味について説明します。

<!doctype html>
<head>
<html lang="ja">
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
Hello,World
</body>
</html>

<!doctype html></html>
doctype宣言といいます。

「このファイルはHTMLファイルである」ということをグーグルなどの検索エンジンに認識させるために書きます。

「!」は半角で入力しますが、doctypeの部分は大文字でも構いません。

<head></head>
主に、<head>、<title>、<meta>など、アクセスしたユーザーのブラウザに直接表示されず、グーグルなどの検索エンジンに認識させるための情報を入力するためのタグです。

<html lang="ja">
このページは日本語であることを検索エンジンに認識させています。

utf-8以外にも、utf-16、shift-jis、euc-jpなどもある。

SEO対策（検索結果に自分のサイトが上位表示されやすくするための工夫）で入力する検索キーワードも、<meta>に入力します。

文字エンコーディングとは、コンピュータ上で表示される文字には色んな種類がありますが、その中でもどの種類を使うかを指定するもの。

<title>タイトル</title>
GoogleChromeやMicrosoft Edgeなどのブラウザのタブ（画面左上）や、ブックマークした時のブックマーク名に表示させるタイトルを入力するタグです。

<body></body>
この中にサイトの文章や画像、動画などのコンテンツを表示させるための各種タグを書きます。

<head>タグの下に書きます。

Hello,World
は段落を示すタグで、「Hello,World」が１段落として扱われます。

pタグの中で任意の場所に タグ（入力した部分で改行させるためのタグです）を書くと、改行させて２行にわたって表示させれます。

ドリアン5000円 ジャックフルーツ3000円

こういった書き方でも２行にわたって表示させれますが、CSSなどで調節しない限り、pタグで囲った前後の行に１文字分程度のスペースが空きます。

ドリアン5000円
ジャックフルーツ3000円

brタグを使った場合と見比べてみると、後者の方が１行目と２行目に多めのスペースが空いているのが分かると思います。

当サイトで紹介するそれぞれのタグは、<body>から</body>の間に書くことを前提に説明していますので、ご了承ください。