웹 퍼블리셔는 마크업을 할 때 웹 접근성, 웹 표준을 지키기 위해 마크업에 신경을 써야 하는데 주의할 사항과 클래스명을 지을 때 이렇게 하면 좋을 것 같다는 부분을 정리했다.
1.h1~h6
h1은 페이지에서 가장 중요한 부분에 한번만 사용하며 h1부터 h6까지 순차적으로 사용해야 한다.(h2다음에 h4가 오면 안 됨)
그저 글자크기가 크다고 h1를 사용하는 것은 지양해야 한다. 홈페이지의 로고같이 가장 중요한 곳에 쓰는 것이 좋다.
메인 페이지의 secttion 부분마다 h2로 섹션의 제목을 넣어준다. 여기서 클래스명은 sc-oo로 지어 주면 좋다.(예:sc-intro)
footer영역은 보통 h2가 아니라 h3로 시작한다.
2.ul,li목록 태그
ul와 ol같은 목록을 표시하는 태그인 경우 안에 li태그가 들어가야 한다.
목록의 갯수가 2~3개보다는 그 이상일 때 써주는 것이 좋다.
클래스명은 ul,ol일 땐 ㅇㅇ-list, li일때는 ㅇㅇ-item
3.em, strong, p, span
em:단어를 강조하는 태그
strong:문장을 강조하는 태그
p:문장, 의미있을 때 사용하는 것이 좋음
span:별 의미 없는 부분에 쓰임.
4.클래스 이름
가장 큰 영역부터 순서대로 ㅇㅇ-area, ㅇㅇ-wrap, ㅇㅇ-box
5.div
section은 한 섹션을 묶어주는 의미가 있지만 div는 아무 의미 없이 레이아웃을 잡아 영역을 구분할 때 쓴다. 잘 구분해서 쓰자.
6.alt
<img src="alt.jpg" alt="이미지에 대한 묘사를 16자 이내로">이미지 태그에 alt 이미지 묘사를 간단하게 써 주면 된다. 검색엔진최적화SEO상으로는 16자 이내를 권고한다고 한다.
7.이미지 혼자서 독립적으로 쓰일 수 있는 태그 figure
<figure>
<img src="" alt="">
<figcaption>16자 이상 설명가능</figcaption>
</figure>이미지 혼자서 독립적으로 쓸 때 사용되는 태그이다. 개인 프로젝트에서는 주로 슬라이드에 이미지를 삽입할 때 쓰였다.
위의 alt와 달리 figcaption을 사용하면 16자 이상 그림 설명이 가능하다.
