시맨틱 마크업
Semantic (의미론적인) + Markup (HTML로 문서를 작성하는 것)
의미를 잘 전달하도록 문서를 작성하는 것
왜 하는데?
- SEO : 검색엔진 최적화에 유리하다.
- 웹 접근성 : 시각장애인이 웹을 편리하게 이용하는데 도움이 된다.
- 유지보수 : 정리된 마크업이 유지, 보수할 때 편리하다.
어떻게 하는데?
용도에 맞는 태그를 사용한다.
영역을 나눌 때는 <div> 대신 content sectioning 태그들을 이용하고,
1. Content sectioning 태그 이용
웹 페이지를 역할에 따라 크게 나눠 보면, <header>, <nav>, <main>, <aside>, <footer> 로 나눌 수 있다.
<header>와 <footer>는 이름 그대로이고, <nav>는 네비게이션 바, <main>은 페이지의 주요 내용 그리고 <aside>는 페이지와 직접적으로 관련이 있지는 않은 내용들을 담을 때 사용한다.
단순히 페이지를 나누는 것은 <div>로도 나눌 수 있지만, 그 영역이 페이지 내에서 하는 역할에 따라 위의 다섯 가지 태그들을 사용해 나누면 페이지의 구조를 이해하기 쉬워진다.
content sectioning 태그에는 위의 다섯 가지 태그 외에도 주소를 나타내는 <address>, 재사용 가능한 가장 작은 영역인 <article>, main 태그 안에서 다시 크게 영역을 나눌 때 사용하는 <section>이 있다.
그리고 <h1>~<h6> 의 헤더 태그도 content sectioning 태그에 속한다.
2. CSS 스타일을 명시하는 태그 이용하지 않기
HTML 문서를 작성할 때, <b> 태그나 <i> 태그를 이용하면 별다른 CSS 코드 없이도 글자를 진하게 혹은 기울여서 작성할 수 있다.
그러나 <b> 나 <i> 와 같은 태그는 별다른 의미 없이 글자를 꾸미기 위해 사용하는 것이기 때문에 시맨틱 마크업에는 적합하지 않다.
글자를 기울임과 동시에 강조해주는 <em> 태그나 글자를 진하게 하며 아주 강조하는 <strong> 태그를 이용하면 조금 더 시맨틱 마크업에 적합하다고 할 수 있다.
태그
모든 태그를 정리할 수는 없겠지만, 이전 글에서 정리한 <p>, <a>, <img> 등 아주아주 기본적인 태그 다음으로 사용 빈도가 높은 태그들을 정리해보려고 한다.
(시맨틱 마크업을 위해서는 쓰지 말라고 했지만 ...)
<b>- 텍스트를 굵게 표시해준다. (볼드체)<i>- 텍스트를 눕혀서 표시해준다. (이탤릭체)<s>- 텍스트 중간에 줄을 그어준다. (취소선)<u>- 텍스트 아래에 줄을 그어준다. (밑줄)<div>- 태그만 썼을 때는 문서에 변화가 없다. 공간을 나눌 때 사용하고,id나class속성을 통해 CSS로 꾸미기 쉽게 한다.<span>- 문장의 일부분만 선택해서 CSS로 꾸미고 싶을 때 사용한다.<div>와 거의 같은 역할인데,<div>는 block-level element라서 한 줄을 다 차지하기 때문에 문장의 일부분만 선택하고 싶을 때는 쓰기 어렵기 때문에<span>을 사용한다.<br>- break line; 문단 내에서 줄을 바꿀 때 사용한다.<hr>- horizontal rule; 가로 선을 그어 단락을 구분할 때 사용한다.<sub>- 아랫첨자 (이것이sub)<sup>- 윗첨자 (이것은sup)
속성
이전 글에서 잠깐 언급했는데, <img> element에 사진의 주소 src나 대체 텍스트 alt 정보를 주는 것처럼, 속성을 통해 우리는 element에 추가적인 정보를 줄 수 있다.
그러한 속성들은 태그마다 다르기 때문에 태그를 공부할 때 함께 알아두어야 한다.
반면 모든 태그에 적용 가능한 "전역속성"들도 있는데, 대표적인 세 가지만 알아보려고 한다.
style- element에 적용할 스타일(CSS)를 작성할 수 있다. 다른 CSS 적용 방법보다 우선순위가 높다.class- element를 가리키는 이름으로, CSS를 작성할 때 주로 사용한다. 여러 element가 동일한 class를 가질 수 있다.id- element를 가리키는 이름인데, element마다 다른 id를 쓴다는 점에서 차이가 있다.
CSS를 작성할 때는 하나하나 선택해주어야 하는 id보다는 여러 개를 동시에 선택할 수 있는 class 를 많이 사용하는 것 같다.
참고
