Choosing Your tags

먼저는 어떤 태그를 사용할지 결정하는 것이다

  • Generic : <p>, <div>
  • Semantic : <header>, <nav>, <footer>, <figure>

Block Tags

  • Containers
    • <article>, <aside>, <section>, <main>, …
  • <hr> : horizontal rule, 어떤 text도 포함 못한다.
  • <address>
  • <blockquote> : cite attribute 를 가짐
  • <detail>, <summary>

Inline tags

  • <span> : 오리지날 inline tag였다.
  • <cite>
  • <abbr> : text에 마우스 올리면 설명해주는 것
  • <time>
  • <code>
  • <sub>, <sup>

Tags that need “more”

  • <button>
  • <meter>
  • <progress>
  • <iframe> : embed document 에 종종 사용
  • <bdo>
  • <map>, <area> : 이미지에 클릭 할 수 있게 만들 수 있다. 자바스크립트도 필요하다.

Review

  • 가능한 구체적인 tag를 사용하라
  • 일부 tag는 동작 안한다
    • 코드를 유효성 확인하고 문법 오류를 찾아라
    • 다양한 브라우저에서 테스트해봐라