김무훈 @iamuhun@hackers.pub
Public

<section> 버리고 <article> 써야 하는 이유

〈section〉 태그 안의 글에 헤딩(제목)을 포함하면 화면상에서는 그 헤딩들이 논리적인 순차 구조를 가지고 있는 것처럼 보인다. 하지만 이는 순전히 시각적인 것일 뿐 보조 기술과 연동된 구조 정보가 아니다. 〈section〉 태그의 용도는 무엇이고, 헤딩을 어떻게 코딩해야 보조 기술 사용자에게 정말 중요한 구조 정보를 전달할 수 있을까?

<section>을 버리고 HTML5의 <article>을 써야 하는 이유

각 태그는 목적에 맞게 쓰여야 합니다. 제목을 표시할 때는 헤딩 태그를 <h1>, <h2>··· 순차적으로 나열하는 구조여야 합니다. 같은 레벨의 <h> 태그에 <section>을 둘러싸서 제목 크기를 조절하는 방법은 겉모양만 달라질 뿐입니다. <section>은 구획을 나눌 때 쓰세요. <main>, <header>, <footer>, <nav> 등은 스크린리더 사용자에게 매우 유용한 태그입니다. 보조 기술을 사용하지 않는 사용자에게는 아무 영향을 주지 않으니 적극적으로 활용하셔도 됩니다. <article>은 여러모로 유용합니다. 블로그 기사를 만들 수 있을 뿐만 아니라 스스로 독자적인 페이지가 될 수도 있습니다. 유튜브 홈페이지에서는 동영상을 <article> 태그에 넣어 나열하는 식으로 이용할 수도 있습니다. 다른 요소를 추가하기보다 태그의 기본 기능을 올바르게 적용한 웹 페이지를 만들 수 있기를 바랍니다.

webactually.com · Webactually

1
0
0

If you have a fediverse account, you can reply to this note from your own instance. Search https://hackers.pub/ap/notes/01969fd4-30d2-77f9-9bc8-4aafc2b47800 on your instance and reply to it.