참고 : 시맨틱 태그
난이도 쉬움소스 다운로드
영상보기소개
안녕하세요!. 웹스토리보이입니다. 이번 시간에는 시멘틱 태그에 대해서 알아보겠습니다.
시멘틱 태그가 있기 전에는 코딩을 할 때, 레이아웃 작업을 할 때 <div> 코드로 작업을 하였습니다.
하지만 웹 표준에 대한 개념과 웹 접근성에 대한 개념이 중요하게 되면서, 의미가 없는 <div> 요소를 사용하기 보다는 의미를 부여하기 시작했습니다.
즉 헤더 영역을 만들기 위해서는 주로 <div> 태그를 만들고 클래스 또는 아이디에 header라고 이름만 부여했습니다.
이런 부분을 <header> 태그를 만들어서 사용하기 시작했습니다.
즉 의미를 부여하고 그 의미에 맞는 태그를 쓰기 시작했습니다. 이 것을 시멘틱 태그라고 합니다. 즉 의미가 부여된 태그를 말합니다.
이렇게 시멘틱 태그를 사용하면, 자동으로 웹 표준까지 준수하게 되기 때문에 시멘틱 태그 쓰는 것을 권장합니다.
다음의 예를 통해 좀 더 구체적으로 확인해 보겠습니다.
왼쪽은 시멘틱 태그를 사용하지 않고 작업한 경우이고, 오른쪽은 시멘틱 태그를 이용하여 작업한 경우입니다. 의미가 부여된 시멘틱 태그를 사용하였기 때문에, 훨씬 더 가독성도 좋아지고, 웹 접근성도 좋아졌습니다. 이렇게 시멘틱 태그를 쓰면 여러가지 장점이 있습니다.
- 웹 표준 및 접근성 향상 : 일반적인 사용자라면 크게 차이가 없지만, 스크린리더 같은 환경에서는 접근성 및 사용성을 향상시켜줍니다.
- 검색 엔진 최적화(SEO)) : 목적에 부합한 시멘틱 태그를 사용하기 때문에 효율적으로 구조 정보를 파악할 수 있고, 검색 결과 노출에 유리합니다.
- 유지 보수 용이성 : 목적과 의미에 맞게 태그를 사용하기 때문에 어떤 영역인지 바로 확인 가능하며, 유지보수가 쉬어집니다.
