본문 바로가기

Webstoryboy

Category

Explanation

HTML/Topic

시멘틱 태그

01.

참고 : 시맨틱 태그

난이도 쉬움

소스 다운로드

영상보기

소개

안녕하세요!. 웹스토리보이입니다. 이번 시간에는 시멘틱 태그에 대해서 알아보겠습니다.

시멘틱 태그가 있기 전에는 코딩을 할 때, 레이아웃 작업을 할 때 <div> 코드로 작업을 하였습니다. 하지만 웹 표준에 대한 개념과 웹 접근성에 대한 개념이 중요하게 되면서, 의미가 없는 <div> 요소를 사용하기 보다는 의미를 부여하기 시작했습니다. 즉 헤더 영역을 만들기 위해서는 주로 <div> 태그를 만들고 클래스 또는 아이디에 header라고 이름만 부여했습니다. 이런 부분을 <header> 태그를 만들어서 사용하기 시작했습니다. 즉 의미를 부여하고 그 의미에 맞는 태그를 쓰기 시작했습니다. 이 것을 시멘틱 태그라고 합니다. 즉 의미가 부여된 태그를 말합니다. 이렇게 시멘틱 태그를 사용하면, 자동으로 웹 표준까지 준수하게 되기 때문에 시멘틱 태그 쓰는 것을 권장합니다. 다음의 예를 통해 좀 더 구체적으로 확인해 보겠습니다.

왼쪽은 시멘틱 태그를 사용하지 않고 작업한 경우이고, 오른쪽은 시멘틱 태그를 이용하여 작업한 경우입니다. 의미가 부여된 시멘틱 태그를 사용하였기 때문에, 훨씬 더 가독성도 좋아지고, 웹 접근성도 좋아졌습니다. 이렇게 시멘틱 태그를 쓰면 여러가지 장점이 있습니다.

  1. 웹 표준 및 접근성 향상 : 일반적인 사용자라면 크게 차이가 없지만, 스크린리더 같은 환경에서는 접근성 및 사용성을 향상시켜줍니다.
  2. 검색 엔진 최적화(SEO)) : 목적에 부합한 시멘틱 태그를 사용하기 때문에 효율적으로 구조 정보를 파악할 수 있고, 검색 결과 노출에 유리합니다.
  3. 유지 보수 용이성 : 목적과 의미에 맞게 태그를 사용하기 때문에 어떤 영역인지 바로 확인 가능하며, 유지보수가 쉬어집니다.

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기

질문하기