peeks-blog

自分用メモ

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

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

head要素内の記述について

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

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がないと動作しないので注意