0

MDNの『HTML text fundamentals』の概要

HTML

HTML5
0
Like
0
Comment
Like

nasubipenguin
Edited at 2017-04-01

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

英文のページを読んで理解すること
基礎をおさらいすること
を目的にした自己学習のページです。

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

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

対象ページ
MDN > Learn web development > HTML > Introduction to HTML > HTML text fundamentals

以下、概要。

HTMLテキストの基礎
見出しと段落
見出しと段落で構造化されたテキストは読みやすい
段落はp要素、見出しはheading要素で囲まれる
heading要素はh1からh6まであり、h1が大見出し、h2が中見出し、h3が小見出しといったレベル分けがされている
階層構造について

以下を意識するとよい

h1要素はページに1つ
階層構造を守る。h3要素の下にh2要素を使わない
h6要素まであるが、必要でない限り、3階層以上の見出しは使わない
なぜ、構造化が必要なのか?

構造化がされていないと、コンテンツ全体が大きなひとかたまり(改行のない文字の羅列)に見えてしまうため

構造化のメリット

ユーザーが見出しを読んで、必要なコンテンツかどうかを判断できる(数秒で見つからないとユーザーは離脱する)
検索エンジンが見出しを重要語句とみなす(SEO対策)
視覚障害者がスクリーンリーダーで聞く場合に、必要な情報を早く見つけることができる
タグで囲うことで、CSSやJavaScriptのターゲットにできる
なぜ、意味が必要なのか?

信号機で赤が「止まれ」を意味するのと同様、正しい要素を使うことで、コンテンツに正しい意味、機能、見た目を与えることができる
h1要素は「ページ上で最も高いレベルの見出し」という意味を持っている
CSSでspanタグをh1と同じ見た目にしても、特別な意味をなさない
役割にあったHTML要素を使うようにする
リスト
番号なしリスト(unordered list)

買い物リストのような順不同のリストに使われる

  • milk
  • eggs
  • bread
  • hummus

番号順リスト(ordered list)

順番が必要なリストに使われる

  1. Drive to the end of the road
  2. Turn right
  3. Go straight across the first two roundabouts
  4. Turn left at the third roundabout
  5. The school is on your right, 300 meters up the road

リストの入れ子

li要素の中に、ul要素やol要素を入れることで、リストを入れ子にすることができる

強調と重要
強調(Emphasis)

語句を強調する場合は、emタグを使う

見た目上、斜体になるが、斜体にするためにこの要素を使ってはいけない。CSSでルールを定義するか、後述のi要素を使うこと。

重要(Strong importance)

重要の意味づけをする場合は、strongタグを使う

見た目上、太字になるが、太字にするためにこの要素を使ってはいけない。CSSでルールを定義するか、後述のi要素を使うこと。

斜体、太字、下線(Italic, bold, underline)

bタグ(太字)、iタグ(斜体)、uタグ(下線)は、かつてCSSがサポートされていなかった時代に、装飾のための要素として使用されてきた。しかし、近年、意味を重視するようになってからは、使われなくなった。

HTML5で、これらの要素は定義し直され、意味のある役割を持つようになった。

i要素

斜体で記されるもの
外国語
分類学上の呼称
技術用語
考え
b要素

太字で記されるもの
キーワード
製品名
リード文
u要素

下線で記されるもの
固有名詞
スペルミス

nasubipenguin
9Contribution
Follow
人気の投稿

最近知ったforeachのこと
変数の命名規則が混在していたので、質問した話
MDNの『Getting started with HTML』の概要
HTML属性にシングルクォーテーションを使えるのなら、PHPの変数を扱いやすくなるかも、と思ったこと
このページについて
対象ページ
HTMLテキストの基礎
見出しと段落
階層構造について
なぜ、構造化が必要なのか?
構造化のメリット
なぜ、意味が必要なのか?
リスト
番号なしリスト(unordered list)
番号順リスト(ordered list)
リストの入れ子
強調と重要
強調(Emphasis)
重要(Strong importance)
斜体、太字、下線(Italic, bold, underline)
i要素
b要素
u要素
Like
0

Stock
Edit request

Post a comment
EditPreview

Select an image – 0B/2MBPost
© 2011-2017 Increments Inc.TermsPrivacyHelpContactAboutUsersTagsBlogAPITeamKobito Feedback