CODING

[超初心者] HTMLの書き方

投稿日:2019年10月8日 更新日:




どうも、べ〜やんです。

今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。

以下のHTML文をざっくり説明します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="htmlの書き方の基本をわかりやすく説明しています">
    <title>タイトル</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>

    </header>
    <main>

    </main>
    <footer>

    </footer>
  </body>
</html>






DOCTYPE宣言

HTML文書のはじめにDOCTYPE宣言というものします。

HTMLは時代に合わせて進化しています。そして、2019年現在は「 HTML5 」が最新のバージョンです。ですが、まだ古いバージョンも使われているので文書のはじめにHTML5を使っていますよと宣言をします。

↓がHTML5のDOCTYPE宣言です。

<!DOCTYPE html>

DOCTYPE宣言の下にhtmlを書いていきます。




タグ

< >で囲まれた部分をタグと呼びます。ここでは<html>と</html>がセットになっています。

<html>のように / (スラッシュ)が入っていないものを開始タグと呼び、</html>のように / (スラッシュ)が入っているものを終了タグと呼びます。

*<img>タグなど終了タグがないものもあります。

このように< >でタグ付けされている部分を、要素と呼びます。

ここからここまでがhtmlだよ〜と、タグで囲んで範囲を指定しています。

<!DOCTYPE html>
<html>
   <!--- 続きをこの間に書いていく --->
</html>

<!– –>で囲まれた部分は、コメントと呼ばれ実際のページでは表示されません。未来の自分や他のコーディング作業をする人に向けてメッセージを残してコードを見やすくするものです。




headとbody

<html>の中で、<head>と<body>に分かれます。

<head>の中には、そのページのヘッダー情報を書いていきます。ヘッダー情報とは(一部を除き)閲覧者には見えない情報やスタイルシートの読み込みなどを行う場所です。

<body>の中は、サイトの本文を書いたりや画像などを配置して閲覧者に見てもらう為の場所です。

<!DOCTYPE html>
<html>
  <head>
     <!-- webサイトの情報を書く -->
  </head>
  <body>
     <!-- webサイトの本体部分 -->
  </body>
</html>



head要素

headの中は閲覧者から見えない部分が多いですが、SEO対策にとって非常に重要な箇所です。


meta要素

meta要素には、ページのメタ情報を書いていきます。

メタ情報は、検索結果ページなどで表示されるページの説明文や文字が正しく表示される為の文字エンコーディングなどを書いていきます。

<head>
 <meta charset="utf-8">
 <meta name="description" content="htmlの書き方の基本をわかりやすく説明しています">
</head>

title要素

tltie要素はそのページのタイトル表示を決める部分です。head要素の中でもこの部分は検索結果やブラウザのタグに表示される部分です。

<head>
 <meta charset="utf-8">
 <meta name="description" content="htmlの書き方の基本をわかりやすく説明しています">
  <title>タイトル</title>
</head>

link要素

link要素はスタイルシートなど、外部のファイルを読み込む為のものです。

<link rel="stylesheet" href="css/style.css">

link要素の中の、rel= ” “で外部ファイルのタイプを指定します。CSSなどスタイルシートの場合は rel=”stylesheet” となります。そして、href=” “で外部ファイルの場所を指定しています。

また、relやhrefのことを属性と呼び、rel属性、href属性といったように使います。

<head>
    <meta charset="utf-8">
   <meta name="description" content="htmlの書き方の基本をわかりやすく説明しています">
    <title>beeyanblog</title>
    <link rel="stylesheet" href="css/style.css">
</head>



body要素


body要素はHTML文書の本文部分です。今回は大きく「 header 」「 main 」「 footer 」の三つに分けました。


header

header要素はページ上部でロゴマークやメニューバー、ログインボタンなどが設置されることが多い部分です。

また、head要素とheader要素は全くの別物なのです。

<body>
   <header>
     <!-- ヘッダー部分(ロゴ、メニューバーなど) -->
   </header>
</body>

main

main要素は、そのページの主要な内容を書く場所によく使われます。

コンタクトページならコメントフォームを設置したり、商品紹介ページなら商品の画像や説明文を書きます。

<body>
   <header>
     <!-- ヘッダー部分(ロゴ、メニューバーなど) -->
   </header>
   <main>
     <!-- 主要な内容 -->
   </main>
</body>

footer

フッター要素は、ページの最下部でロゴやメニューバーや目次リストなどを配置してそのページを締めくくる場所です。

<body>
   <header>
     <!-- ヘッダー部分(ロゴ、メニューバーなど) -->
   </header>
   <main>
     <!-- 主要な内容 -->
   </main>
   <footer>
     <!-- フッター部分(ロゴ、メニューバーなど) -->
   </footer>
</body>

header要素やfooter要素などは、複数のページで共通のデザインを使うことがほとんどです。




おわりに

今回はHTML文の超基本ルールをざっくりと紹介しました。

HTMLにはまだまだ基本的なルールがありますので、その他のルールや詳しいルールは、他の機会に紹介します。




-CODING
-

執筆者:


comment

関連記事

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

[超初心者] CSSとは

どうも、べ〜やんです。 HTMLに続き超初心者の方用に、マークアップ言語のCSSとはついて書きます。 CSSとは何か? CSSとは、Cascading Style Sheets(カスケーディング・スタ …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …

[CSS] CSSで文字に影をつける方法

どうも、べ〜やんです。 今回は、CSSで文字に影やアウトラインをつける方法を紹介します。 text-shadow text-shadowは文字に影をつけるプロパティです。 値は4つ使用します。 {te …