zacrich’s blog

得た知見などの自分用メモを発信していきます

HTMLを書いていて得られた知見

こんにちは。ざくりっちです。

定期的に得られた知見を書いていくぞ!!

と意気込んでブログを開設したものの、まだ一度も更新していないというモチベの続かなさ… ほんの少しでも得るものがあればすぐブログを書く。習慣付けて行きたいと思います。

最近はインターン先の課題でHTMLとCSSを書いているので、 まずはHTMLから得られた知見をまとめていきます。

得られた知見(HTML)

  • 違うサイトに飛ぶリンクであれば新しいタブを開いた方が良い

<a href="URL" target="_blank”>ほげ</a>

aタグにtarget=“_blank”を追加すると新しいタブを開いてリンク先に飛んでくれる。

機種依存文字があれば実体参照を使う ©&copy; <&lt; >&gt; とか

  • h1〜h6タグの使用順序

h1〜h6が見出しを表すタグだとは知っていたが、サイズ感で使い分けるものだと思っていた… 例えば、「ここの見出しデカすぎ...少し小さくしたいからh1ではなくてh2使おう」みたいな使い方をしていたが、 こんな使い方は駄目で、使用順序にはちゃんとルールがあるらしい。

h1は主題。1記事に1度だけ使用。 h2〜h6は何度使用してもok。見出しの大きさに応じてh2から使用する。

<h1>◯◯トークイベント開催</h1>
<h2>場所・日時</h2>
<h2>注意事項</h2>
<h2>◯◯プロフィール</h2>
  • 見出しとコンテンツをセットにしてsectionで囲む(逆に見出しorコンテンツどちらかがなければ囲わない)
<h1>◯◯トークイベント開催</h1>
<section>
    <h2>場所・日時</h2>
    <p>ほげほげ</p>
</section>
<section>
    <h2>注意事項</h2>
    <ul>
        <li>ほげほげ</li>
        <li>ほげほげ</li>
    </ul>
</section>
  • クラス名付けるの難しい…

このコンテンツとこのコンテンツは右寄せしたいからまとめてクラス名rightにしよう、 とすると、後からcssでfloatではなくflexboxを使った際にright、left関係なかったな、となる。 id名は意味なくてもいいらしい。思いつかなかったらその瞬間の時刻を付ける、とか。

  • smallタグ

免責、警告、法的規制、著作権、ライセンス要件、注釈、細目を記す際に囲う。 これも文字サイズを小さくする意味っぽそう(HTML4.01まではそうだったらしい)だけどHTML5から変更されたとか


今後JSも触っていきたいと思っています。 ブログの書き方、markdownにも慣れていけたらいいですね...