Zenn
🌟

【初学者によるまとめ】この一冊で全部わかるWeb技術の基本　「Chapter4」＞「01 HTML」

2024/12/19に公開
HTML
HTML 5
web技術の基本
webページ
tech

目的：「イラスト図解式 この一冊で全部わかるWeb技術の基本」の要点を自分なりにまとめ、Qiitaへアウトプットして理解力の向上に努める。

注意点
"HTMLの発展"と"HTML文書の構造"の順で記述しております
🤔 ←この絵文字の文章は個人的な見解になります。的外れなこともあるかと思います。
例）🤔<(感想、考察、疑問点など)

（参考書籍）

  1. イラスト図解式 この一冊で全部わかるWeb技術の基本

（参考サイト）

HTMLの発展

  • HTMLは当初は単に「文書（CSSなどの装飾、画像、埋め込み動画などは除く）」「別文書への参照リンク」を持つだけだった
  • 現在では画像や動画を扱えたり、モバイル機器対応などバージョンアップが行われている
    • 書籍ではHTML5.1が最新バージョンとなっている

HTML文書の構造

  • HTML文書は「Webページの構造・枠組み」「文書の構成」を情報として持つ
    • タグで「何を示すか」＝「枠組み・構成」を表現する
      • 始まりと終わりを示す"開始タグ"、"終了タグ"でHTML文書構成の要素を表す
    • 要素には必要に応じて属性を追加する
      • 例）<a>要素ではリンク属性を追加する
HTML要素の基本構文
<要素名>文書</要素名>

例）
<a href="https://qiita.com">Qiita</a>

要素名：a = 「これはリンクを意味する要素」
  ├─ 開始タグ：<a href="https://qiita.com">
  │　 └─ 属性：href="https://qiita.com"
  │
  ├─ 文書　　：Qiita
  └─ 終了タグ：</a>

HTML文書の基本構造について

  • HTML文書はhtmlという要素名のタグにいくつもの要素を入れて構成

（画像：HTML文書のサンプル）
image.png

画像のコード
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Qiitaの記事に載せる用</title>
</head>
<body>
  <h1>下のリンクはQiitaへのリンクです</h1>
  <a href="https://qiita.com">Qiita</a>
</body>
</html>

Discussion