【メモ】HTMLまとめ①

【メモ】CSSまとめ①

HTMLの基本構造について

タグの構造

<要素名>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>

  • 要素名
    タグの種別を指定します。タグ名とも言われます。
    要素の種類によって終了タグ（</要素名>）の有無が決定します。
  • 属性
    要素名に対して設定する属性名を指定します。
    属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。
  • 属性値
    属性に対する値を指定します。
    一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。
    属性値がない時は、イコール（=）以降が省略されます。
    複数の属性を指定する時は、スペースで区切って指定します。

HTMLの基本構造

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

  • !DOCTYPE 宣言（ドキュメントタイプ宣言）
    ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。
    HTML5 であれば<!DOCTYPE html>と記述します。
  • html 要素（HTML の文書）
    html 要素は、この文書が HTML の文書であることを表します。
    「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。
  • head 要素（文書情報）
    head 要素は、この文書のメタデータを記述します。
    例えば、<title>～</title>でその文書のタイトルを記述することができます。
  • body 要素（文書本文）
    body 要素は、この文書の本文を記述します。
    この body 要素で囲まれた領域が Web ページとして表示されます。
  • インデーテーション(字下げ)

　　HTMLを記述する時は、可読性を向上させるためにインデンテーション（字下げ）を意識する。
　　4・8などの偶数で下げていく。3とか5とか奇数での字下げは行わない。
(半角や全角の空白スペースではなくTABキーを使う)

楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。
その場合やむを得ず、違う方法を使わなければならない場合がありますので必ず確認しておきましょう。

head要素

  • title 要素（ページタイトル）

<title></title>

  • meta 要素（文字コード指定／charset）

<meta charset=”UTF-8″>

  • meta 要素（ページの説明文／description）

<meta name=”description” content=”サイトの説明文”>

  • meta 要素（ビューポート／viewport）

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

  • link要素（外部 ファイルとの紐付け）

<link href=”スタイルシートファイルのパス名” rel=”stylesheet” type=”text/css”>

<link href=”ファビコンファイルのパス名” rel=”icon”>

body要素(文書本文)

  • 構造化タグ
  • コンテンツのグループ化タグ
  • テキストの意味
  • コンテンツの埋め込み
  • テーブル
  • フォーム

HTML構造タグ

  • article 要素（アーティクル）

<article></article>

  • section 要素（セクション）

<section></section>

  • nav 要素（ナビ）

<nav></nav>

  • aside 要素（アサイド）

<aside></aside>

  • h1～h6 要素（見出し）

<h1></h1>

  • header 要素（ヘッダー）

<header></header>

  • footer 要素（フッター）

<footer></footer>

見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はありません。
h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。
「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。
ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができます。

HTML：コンテンツのグループ化タグ

  • p 要素（段落（パラグラフ））

<p></p>

  • hr 要素（区切り）

<hr></hr>

  • ol/li 要素（順序のあるリスト）

<ol></ol>

<li></li>

  • ul/li 要素（順序のないリストli）

<ul></ul>

<li></li>

  • dl/dt/dd 要素（定義・説明リスト）

<dl></dl>

<dt></dt>

<dd></dd>

  • main 要素（メインコンテンツ）

<main></main>

  • div 要素（ひとつのかたまりの範囲）

<div></div>

HTML：テキストの意味

  • a 要素（ハイパーリンク）
  • em 要素（強調）
  • strong 要素（強い重要性）
  • small 要素（免責・警告・著作権など）
  • i 要素（他と区別されるテキスト（思考・専門用語 等））
  • b 要素（他と区別されるテキスト（キーワード・製品名 等））
  • span 要素（特定の範囲をグループ化）
  • br 要素（改行）

HTML：コンテンツの埋め込み

  • img 要素（画像）
  • iframe 要素（インラインフレーム）

画像の取り扱いについて

<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。
一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。
他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。
HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

メモ用

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="サイトの説明文">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web ページのタイトル</title>
<link href="スタイルシートファイルのパス名" rel="stylesheet"  type="text/css">
<link href="ファビコンファイルのパス名" rel="icon">
</head>
<body>
	Web ページの内容を記述
</body>
</html>

TeraPadの使い方と保存方法

ファイルを保存する時は文字コードを「UTF-8N」に設定。
（HTML・CSS の指定に合致させます）

ファイル→文字→コード指定保存→UTF8N

※TXTで保存しない

コメント