HTMLの基本構造のマークアップ

HTML基本構造のマークアップ

  • 全てのHTMLドキュメントに必須
HTML5のDOCTYPE宣言
  • lang属性:ページの主要言語を指定する
  • HTML5文字コードセットは原則「UTF-8
  • ページタイトル:30字から40字で重要な後から始める
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基本構造</title>
</head>
<body>

</body>
</html>
CSSファイルの読み込み
  • CSSフォルダー内にあるCSSファイルの読み込みの場合
<link rel="stylesheet" href="css/style.css">
CSSファイルの文字コードセット
@charset "UTF-8";

p {
  color: #0033ff;
}
CSSをHTMLに直接記述
  • 記述するCSSが短い場合
  • 他のページでは使わず、1ページにだけ必要なCSSを追加する場合
  • style要素を使って記述
コメントを記述(コメントアウト
  • HTML内の場合
  <!-- ここにコメントを記述 -->
  • CSS内の場合
/* 
CSSソース内にコメントを残す
 */

body内の記述

  • 見出し
  • 段落
  • 箇条書き
フレージング要素
  • テキストを修飾する
  • strong、b、i、span、mark、img、input、textarea、labelなど
フレージング以外の要素
  • p、h1、i、ul、li、ol、table、tr、td、form、section、articleなど
段落のマークアップ
見出し
  • 優先順位の高いh1からh6までの種類がある
段落内で改行
  • 同じ段落内で改行したい
  • 段落の改行ではなく、視覚的に強制的に開業したい場合にのみ使用
  • br要素
テキストの一部を強調
  • strong要素:重要
  • em要素:強調
  • b要素:注目してほしい場所のテキストを太くする
連絡先を表示
  • address要素:記事コンテンツ、またはページ全体の連絡先を記載する
  • 書く位置によって何の連絡先かが変わる
  • articleの中に書かれている場合は、その記事の作者の連絡先を記述する
  • article以外で書かれている場合は、ページ全体の連絡先(そのサイトを運営する企業などの連絡先)を記述する

文書構造とは

  • 見出しや文章、画像の論理的な配置のこと
なぜ正しいHTMLを書く必要があるのか
  • セマンティックWebsemantic web):1998年にティム・バーナーズ・リー氏によって提唱された技術であり、「情報リソースに意味(セマンティック)を付与することで、人を介さずに、コンピュータが自律的に処理できるようにするための技術」と定義されている

20140202160025


HTML5とは

  • semantic なページを構築することを目的として策定されたマークアップ言語

文書構造のための要素

  • h要素
  • p要素
  • ul、ol要素
  • dl要素
  • table要素

HTML5新要素

  • header
  • footer
  • nav
  • main
  • section
  • article
  • aside

など

新要素の使用可能範囲

f:id:lesson3:20170814234526j:plain

求職者支援訓練 フェリカテクニカルアカデミー