HTMLのhead要素とbody要素の記述について

この記事は3分で読めます

自分用メモ

基礎を理解したらhead要素とbody要素の記述を覺える

※参考:HTMLとは?head要素やbody要素、属性について解説

head要素内の記述について


以下の3つの要素が入る:コンテンツではなく、
「コンテンツのメタ情報」を記述するのが殆どである

meta要素

文書のメタ情報(文書の説明や文字エンコーディングなど)を記述する
meta要素はhead要素だけで使用される

<meta charset=”UTF-8″>
UTF-8の文字コーディングだけでHTML文書を書きますよ、という宣言
これを書いてないと「文字化け」などの原因となる
決まり文句として内の最初に書いておく

<meta name=”description” content=“…”>
サイトの概要を説明するもの。SEOの上で重要なHTML要素である
Meta要素は「色々なメタ情報を入れるための器」と考えると良い

title要素

「Webページのタイトル」を記述する、SEO上も重要な要素である
Webページのタイトルは、検索エンジンの結果に一覧表示される
タイトルを付ける際は、Webページの内容に合ったものにすること

link要素

スタイルシートなどの外部ファイルを参照する際に使用する
・rel属性:外部ファイルのタイプを指定する
・href属性:外部ファイルの場所を指定する

※参考:SEOで上位表示するための原則と具体的な方法

body要素内の記述について


body要素内には「コンテンツ」を記述する
Webページとして表示されるのは、全てbody要素内に記述する
head要素に文書のメタ情報を記述した後は、
メインであるbody要素のコーディングに入る

以下は、Webページのコンテンツを記述するための要素

段落(文章)

文章を記述する時は「p要素」を使う、段落ごとにp要素で区切る
「何か文章を書く時はp要素を使う」と覚えておく
※pはパラグラフのpである

文章中の改行

任意の場所で改行をしたい場合は「br要素」を使う
br要素は終了タグのない要素
HTMLは
を使わないと改行できない:通常の改行や空白は、
全て半角スペース1つに置き換えられてしまう

br要素の改行は文章中に限る:
Webページのレイアウトのために
を連続で使うのはNG
要素と要素の余白」を取りたい場合は、CSSのmarginなどを利用する

画像

画像の表示には「img要素」を用いる:img要素は終了タグのない要素
画像タグは、 src属性に画像のURLを指定して画像を表示する

alt属性
画像に対するテキストでの説明を記述する
altに書かれたテキストは画像が通常通り表示される時は隠されるが、
画像が正確に表示されない場合に表示されたり
視覚障害や認識機能障害を持つ人向けの
音声補助ソフトに読まれるなどの役割を持っている
alt属性は重要なので、画像の説明が出来るのであれば書くべき

ページリンク

記述にはa要素を用いる:aは「アンカー」の略
href属性にURLを記載することでリンク先を指定する
<a>・・・</a>で囲まれ要素がクリック出来るようになり、
クリックするとリンクへ移動する

リスト

順序なしリストはul要素を利用する
ulは「Unorderd List」の略で「順序なしリスト」を意味する、
ul要素の内部にli要素を並べてリストを作成する
liは「List Item」の略で「リスト内の1項目」を意味する

順序ありリストはol要素を利用する、数字が使われるやつ
olはOrderd Listの略で「順序ありリスト」の意味がある
順番がある場合は「順序あり」を使う
ol要素の内部にli要素を並べてリストを作成する

表(テーブル)

・table要素:表を始める要素、最初に書く、必須

・thead:表の見出しとなる部分(上)を書く時に使う、なくても良い

・tr:「table row」の意味、横一列を書く時に使う、必須

・th:「table head」の意味、見出しの内容を書く時に使う、デフォルトで太字になる、必須

・tbody:表の内容を書く時に使う、なくても良い

・td:「table data」の意味、内容を書く時に使う、必須

※参考:HTMLとは?head要素やbody要素、属性について解説

フォーム

Form要素を用いる
どんな事を入力させたいかで利用するパーツは異なる
Form要素内には様々な要素が入る

・Label
input要素のためのラベル、for=“”の属性でinput要素のid属性を指定する

・input
入力形式を選べる、type=“”によって、
どんな形式のものが入力されるのかを指定する

・Select:選択肢から選ぶ形式

・type=“radio”:ラジオボタン形式の選択

・Textare:複数行テキスト入力形式

※参考:HTMLお問い合わせページ(フォーム)の要素まとめ

Formは、単にformを設置して送信ボタンを押しても動作しない
何かしらのサーバーサイドプログラミング言語や、
WordPressなどのCMSがないと動作しないので注意


  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。