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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

[超初心者] CSSとは

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

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

[CSS] 変化Transitionの使い方

どうも、べ〜やんです。 今回は、変化の詳細を指定するTransitionを紹介します。 CSSだけで設定できるので初心者の方にもおすすめですよ。 Transitionとは transitionとは:h …