HTMLのお勉強

なぜ

キレイなマークアップを見て「オッ」となったことがあるので、年末だし勉強するかというノリ

目指せフルスタックエンジニア ~ フロントエンド編 ~

先にまとめ

web やるなら HTML ちゃんと勉強しよう。

個人的には HTML Exercises がオススメ。実際に手で書いて覚えられる

新しく学んだこと

基本的に w3schools.com tutorial の内容

既知の情報もあるのでそれ以外の部分をザッと書く

tooltip

これはまったく知らなかった。 title attribute でそのテキストにホバーした際に tooltip が出る

e.g.) <p title="You see me!">Hello!</p>

Hello!

HTML Formatting

  • <em> emphasize の略。文字通り強調するためにあるが、表示としては斜体
    • <i> で italic になる。表示は同じ
  • <strong> これは「重要性を表す」ためにあるらしい。表示は太字。 em との区別が謎
    • ちなみに <b> は単に太字にするためだけに使われる。

Mastodon でつぶやいたところ、CSS でやれという意見もあったが、 em, strong は markup として表現するのは正しい気がする。

i, b あたりは確かに CSS でやるべきかもしれない。

その他

  • <del> 取り消し線
  • <mark> ハイライト

HTML Input Types

Browser によってサポート状況がマチマチなので気をつける

Safari, IE あたりは○ねばいい。

  • type="reset" このボタンを押すと input の value が reset される。JS でやるべきな気もする
  • type="search" 検索フォームとかは単に type="text" とやるよりはこっちの方がイケてそう。挙動は type="text" と同じ

HTML Quoations

結構マイナーな要素が多いイメージ(自分が知らなかったことを正当化)

  • <abbr> 略称に使う
 <!-- e.g. -->
 <p>
   <abbr title="PLAYERUNKNOWN'S BATTLEGROUNDS">PUBG</abbr> is the best PC game in 2017!
 <p>

PUBG is the best PC game in 2017!

HTML Lists

  • <ol type="1"> ordered list にした場合、 default が 1 になっており数字が表示される。
    • type="a" で a, b, c
    • type="A" で A, B, C
    • のように自分で設定できる。

おわりに

HTML Excercises は後半ちょっと「それは HTML でやるなよ」的な内容がちょいちょいあるので全部を手放しに「最高!」とは言えないが、サクッとやる分には良さそう。

普段 Rails を使っているせいで form の生成などは view helper に頼ってて生でHTMLを書くことがないが、実際にどういう HTML が生成されることでどういう挙動になるか、はちゃんと知っておいた方がいい。言うまでもない。

Contents