웹접근성을 높이기 위해서 잘 사용되는 시맨틱한 태그들 중에 대표적으로
<h1> ~ <h4> 가 있다.
페이지, 영역, 콘텐츠 부분에 적절한 제목을 제공하는 역할을 하는 헤딩 태그를 알아보자.
장점
-
웹사이트가 제공하는 모든 웹 페이지에, 서로 다른 제목을 제공하면 동시에 여러 개의 웹 페이지가 열려 있더라도, 사용자는 웹 페이지의 제목을 확인하여 열려있는 웹 페이지간을 편리하게 이동할 수 있다.
-
웹페이지를 구성하는 모든 영역에 제목을 제공하면, 사용자는 영역의 제목을 통해 영역간을 매우 편리하게 이동할 수 있다.
준수원칙
- 각 페이지는 해당 페이지만의 유일하고 서로 다른 페이지 제목을 가져야 한다.
<body>
<h1>my site</h1>
</doby>- 동일한 페이지에 포함된 모든 프레임은 해당 프레임만의 유일하고 서로 다른 프레임 제목을 가져야 한다.
<body>
<h1>my site</h1>
<section>
<h2>sex</h2>
<p>woman</p>
</section>
<section>
<h2>hobby</h2>
<p>movie</p>
</section>
</body>- 제목은 간단명료해야 하며, 해당 페이지, 영역, 콘텐츠 블록을 유추할수 있도록 제공해야 한다.
- 영역이나 콘텐츠 제목에만 제공해야 한다.
아래 예시코드보면, 제목 정보에만 헤딩태그를 제공하고, 내용에는 헤딩 태그를 제공하지 않았다.
<h3>자유게시판</h3>
<ul class="board_list>
<li class="board_item">자유게시판은 누구나 자유롭게 의견을 게시할 수 있는 공간입니다</li>
<li class="board_item">상업성 광고, 저속한 표현, 특정인에 대한 비방, 정치적 목적이나 성향, 반복적 게시물 등은 관리자에 의해 통보없이 삭제 될 수 있습니다.</li>
</ul>- 화면에 표시되지 않더라도 콘텐츠 영역에는 헤딩 태그를 제공해야 한다.
골라서 뽑아내는 기능이 있기 때문에 책갈피나 인덱스 역할을 할수 있다.
내가 원하는 정보를 계층 구조별로. 원하는 정보의 제목별로도, 필요없는 페이지를 넘어갈수 있고, 내가 원하는 해당되는 영역으로 이동할수 있는 역할이 있다.
카테고리 아이콘 이미지 과일 견과 쌀
위에보다 alt 값을 공란으로 하는게 바람직하다.
sfsdfsfas
sdfsfsd
sfsdfsfas
sdfsfsd
sfsdfsfas
sdfsfsd
sfsdfsfas
sdfsfsd
프론트엔드 개발자가 되기 위해 열심히 달리고 있는 꼬꼬마개발자