HTMLの基本的な書き方

プログラミング

HTMLのタグの要素と属性について

HTML
HTMLの概要の説明をすうる前にタグの用語と属性について解説します。

要素

HTMLを構成するために必要な成分です。基本的に開始タグ〜終了タグ(<○○○>~</○○○>)で囲まれた構造になっています。この開始タグ〜終了タグで囲まれた全体を『要素』と呼びます。

(例)

<html>       (内容)      </html>  

開始タグ  タグに囲まれている部分が要素 終了タグ

属性

属性は、要素に情報を付け加える役割を持ち、属性のあとには属性値が続きどのような属性なのかを示すします。

(例)

<meta charset=”utf-8“>

属性  属性値

見出しタグ

<H1>~<H6>のHとはHeadingの略で、見出しを作るためのタグです。

文章の章題や節題を記述し、その見出しの大きさに合わせて<h1>タグから<h6>タグまで設定できます。

<h1>タグが一番大きな見出しになり、数字が小さくなるにしたがって、小さな見出しという意味です。同じ数値の見出しタグがあれば、同じランクとして扱われます。見出しタグには、<h1>、<h2>、<h3>…というように合計で6種類あります。

見出しタグの使い分け

h1〜h6を使う順番を守る

基本的にh1見出しから順番に使っていきます。バランスがいいととh1要素の次にh4要素を書いたりしないこと。h1要素の次の見出しはh2要素を、h2要素の次の見出しにはh3要素を使うようにすることです。

h1タグの使用は1回だけにする

h1要素はページの中で一番重要な見出しで、title要素と同様に、ユーザーにとってわかりやすい・魅力的な見出し文が理想的です。

h1は1番目に大きい見出し

h2は2番目に大きい見出し

h3は3番目に大きい見出し

h4は4番目に大きい見出し

h5は5番目に大きい見出し
h6は6番目に大きい見出し

DOCTYPE HTML

HTMLの文書の一番初めに書かれているDOCTYPE宣言です。

DOCTYPEは「ドキュメントタイプ」の略で文章の種類を示します。
<head>や<html>の前に書かれているには理由があります。

DOCTYPE宣言

  • この文書がHTMLであること
  • HTMLのバージョンを明記すること
  • このDTD(Document Type Definition/文章の構成要素バージョン)がなにか明記すること

を目的とし、ブラウザはこの宣言の内容に従って、文書を表示します。大文字で書いても小文字で書いてもOKです。

閉じタグはありません。この要素を記述しないと、レイアウトが崩れ、正しく表示がされない場合があります。

head要素

webサイトの情報や、CSSファイルの情報を記載する部分です。ここに記述した情報は画面上に表示されません。

head 要素は、ブラウザーに対する指定と、文書に関するメタデータなど、付加的な情報を指定するための場所です。

例を上げますと、

  •  <title>(タイトル)
  • <base>(基準URL)
  • <link>(リンク情報)
  • <style>(スタイルシート)
  • <meta>(メタデータ)

などが挙げられます。

これらのメタデータを表すタグは、すべて<head>~</head>の中に配置します。

head要素

CSS

CSSとはCascading Style Sheets(カスケーディングスタイルシート)の略で、スタイルシートとも呼ばれ、文章にデザインを施したいときに使う言語です。

HTMLが文章の構造を作るのに対して、CSSは「その文章をどのようにデザインを施し、見栄えを整える言語」なのでHTMLとセットで使われます。
このことから、CSSは「構造」と「デザイン」の役割を分けるための言語と言えます。

CSSはHTMLのタグで囲んだ場所の文字の色を変えたり、リンクをボタンにしたりして装飾することが出来ます。

HTMLの雛形です

コメント

タイトルとURLをコピーしました