A11Y 101: Semantic HTML이 항상 승리합니다.

이것은 기술 문서라기보다는 설명에 가깝고 시맨틱 HTML이 항상 승리하는 이유를 설명합니다.

이 시맨틱 HTML은 무엇입니까

시맨틱 HTML과 비시맨틱 HTML의 주요 차이점은 시맨틱이 코딩을 설명하는 방식이라는 것입니다.

우리(개발자)는 요소가 무엇인지 설명하는 요소를 정의합니다.
몇 가지 예:

메인

헤더

기사

따로

바닥글

... 등등

이러한 의미론적 요소는 이름에서 알 수 있듯이 이미 의미론적이지 않은 사촌보다 더 설명적입니다.

사업부

스팬

... 그리고 이들 중 일부

이것이 왜 중요한가요?

인수에서 접근성을 제외하더라도 시맨틱 HTML을 학습하는 데 시간과 노력을 집중하고 투자하는 것이 좋습니다.

그것은 당신의 구조를 정의하고 모든 종류의 다른 승리를 위한 방법입니다.

브라우저는 이러한 차이를 가로채고 인쇄 스타일을 생각하고 스타일을 읽을 수 있습니다

.

SEO는

가 웹 사이트를 읽기 위해 시맨틱 HTML을 좋아합니다.

물론 방 안의 고릴라: 접근성, 좋아요

그 외에도 예를 들어 div가 <header>보다 낫다는 좋은 주장이 있습니까?

시맨틱 HTML 및 접근성

물론 우리는 접근성 향상에 초점을 맞추고 있는데 왜 이 시맨틱이 중요할까요?

첫째, 장애가 있는 사람들이 사용할 수 있는 스크린 리더 및 기타 도구는 시맨틱 HTML을 좋아합니다.

다른 예로는 키보드 탐색, 특정 읽기 전용 소프트웨어(기사 부분 외부의 모든 항목을 제거할 수 있음) 또는 입으로 구동되는 입력 장치와 같은 다른 탐색 방법을 사용하는 사람들이 있습니다.

당신은 그림과 다양한 사용 사례를 얻었고 그들은 당신의 웹사이트를 식별하는 방법이기 때문에 시맨틱 HTML을 좋아합니다.

이 간단한 예를 들어보겠습니다.

A: 비의미적 레이아웃

<div class='header'></header>
<div class='nav'></nav>
<div class='main'>
    <div class='article'>
        <h1>Title of article</h1>
        <p>...</p>
    </div>
</div>
<div class='sidebar'></div>
<div class='footer'></div>

레이아웃 측면에서 우리는 이 작업을 훌륭하게 수행할 수 있지만 스크린 리더는 내비게이션 위치, 기사 시작 및 종료 위치, 사이드바를 전혀 알지 못합니다.

궁금한 점이 있다면 이러한 도구는 클래스를 기반으로 웹 사이트를 읽을 수 없습니다. 다시 말하지만 모든 개발자는 사용자 정의 이름을 사용하거나 일부 빌드 도구와 함께 스머지하기 때문입니다.

이러한 요소를 식별하는 데 도움이 되도록 시맨틱 버전을 활용할 수 있습니다.

B: 시맨틱 레이아웃

<header></header>
<nav></nav>
<main>
  <section>
    <article>
      <h1>Title of article</h1>
      <p>...</p>
    </article>
  </section>
</main>
<aside></aside>
<footer></footer>

이렇게 하면 이러한 환상적인 접근성 도우미 도구에서 사용되는 유형별로 요소를 완성할 수 있습니다.

결론

이것이 바로 시맨틱이 항상 승리하는 이유입니다! 구조화되어 있고 명확하며 검색이 가능합니다.

접근성 도우미뿐만 아니라 SEO 엔진 및 사용자 또는 로봇이 사용할 수 있는 기타 도구도 있습니다.

이 기사가 시맨틱으로 전환하도록 동기를 부여하기를 바랍니다. 날 믿어. 시맨틱 측면으로 전환하는 것은 그리 어렵지 않습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나