Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

MDNの『Getting started with HTML』の概要

More than 3 years have passed since last update.

このページについて

MDN(Mozilla Developer Network)の技術情報ページを和訳し、要点をまとめたものです。

  • 英文のページを読んで理解すること
  • 基礎をおさらいすること

を目的にした自己学習のページです。

厳密な和訳ではなく、全文を網羅したものでもありませんが、
掲載内容について間違いがありましたら、ご指摘いただけると幸いです。

気づいたことや感想は、「memo:」としてコメントしています。

対象ページ

MDN > Learn web development > HTML > Introduction to HTML > Getting started with HTML

以下、概要。

HTML事始め

要素(element)

  • 要素(element)は、開始タグ(opening tag)と終了タグ(closing tag)で囲まれた中身(content)からなる
element
<tag>conent</tag>
  • img要素のように、開始タグのみで、中身を持たない要素(empty element)も存在する
empty_element
<tag attr="value">
  • 要素は、ネスト(入れ子に)できる
  • 要素は、ブロック要素(block element)とインライン要素(inline element)に2分される
ブロック要素 インライン要素
主な役割 ページの構造を担う 文書内のパーツ
主な要素 段落、リスト、ナビゲーションメニュー、フッター リンク、強調要素
要素間の配置 前後で改行される 前後で改行されない(同じ行になる)
ブロック要素の中に 入る 入る
インライン要素の中に 入らない 入る

属性(attribute)

要素は、属性(attribute)を持つことができる

element_with_attribute
<tag attr="attr_value">content</tag>
  • 属性は、開始タグの要素名の後ろに配置する
  • 要素名と属性、属性間は、半角スペースで区切る
  • 属性は、属性名と属性値を=(イコール)でつなげる
  • 属性値は、ダブルクォーテーションで囲う
    • シングルクォーテーションでも良い
    • ただし、クォーテーションが混在してはならない
  • input要素のdisabled属性のように、属性値を省略できる論理属性(boolean attribute)も存在する

memo:
 省略できるのは、属性名ではなく属性値。
 disabled="disabled"がdisabledになるのは、=以降が省略されている。

文書構造

doctype

  • 文書の種類を定義する
  • 以前はHTMLとしての妥当性のため、複雑なルールを定義する必要があった
<!DOCTYPE html>

html要素

  • HTMLページのルートになる要素
<html></html>

head要素

  • 検索結果に表示させたいkeywordやdescription、CSSファイルへのリンク、文字コードなどを設定する
  • ページ上には表示されない
<head></head>
文字コード
  • 特に理由がなければ、最も多くの言語に対応したutf-8を指定する
<meta charset="utf-8">
title要素
  • ページのタイトル
  • ブラウザのタブや、ブックマーク時に表示される
<title></title>

body要素

  • コンテンツ
  • ページ上に表示される
<body></body>

その他

スペースの扱い

HTML上の連続したスペースは、1つのスペースとして扱われる

特殊文字(special character)

特殊文字(special character)は、文字実体参照(character reference equivalent)に置き換える

意味 特殊文字 文字実体参照
大なり記号 > &gt;
小なり記号 < &lt;
ダブルクォーテーション " &quot;
シングルクォーテーション ' &apos;
アンパサンド & &amp;

コメント(commnet)

コメントは、<!---->とで囲う

comment
<!-- content -->
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away