2023/10/10

学科 HTML基礎②【オンライン】

 

今日のテーマ

HTMLの基本構造を理解しよう

HTMLの基本構造

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

  • !DOCTYPE 宣言(ドキュメントタイプ宣言)
  • html 要素(HTML の文書)
  • head 要素(文書情報)
  • body 要素(文書本文)

 

文書情報について

  • title 要素(ページタイトル)
  • meta 要素(文字コード指定/charset)
  • meta 要素(ページの説明文/description)
  • meta 要素(ページのキーワード/keywords)
  • meta 要素(ページの作者情報/author)
  • meta 要素(ビューポート/viewport)
  • link要素(外部 CSS ファイルの紐付け)
  • link要素(ファビコンファイルの紐付け)

 

文書本文について

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ
  • コンテンツ埋め込みタグ
  • テーブルタグ
  • フォームタグ

 

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類される。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっているので、あくまでも性質を持っていると考えておく。

セクション分類タグについて

  • h1~h6 要素(見出し)
  • article 要素(アーティクル)
  • section 要素(セクション)
  • header 要素(ヘッダー)
  • footer 要素(フッター)
  • nav 要素(ナビ)
  • aside 要素(アサイド)

one point

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

one point

マークアップに悩んだらとにかく「p」にしよう

 

本日のテーマ②

(ここから補足資料)

紙のポートフォリオは面接の時に利用しよう

まずは、ポートフォリオサイトに日々の学びと多くの作品をまとめておき、面接が決まったら「紙のポートフォリオ」も用意して企業さんへの手土産として持参しよう

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です