ted0505
Computational Art & Study
ted0505
전체 방문자
오늘
어제
  • 분류 전체보기 (79)
    • Computer Science ( CS ) (0)
    • Computational Thinking (6)
    • 프로젝트 개발일지 (1)
    • Coding (52)
      • C++ (39)
      • JavaScript (2)
      • P5.JS (7)
      • Python (0)
      • HTML5 (1)
      • CSS (0)
    • Game Engine (18)
      • Unreal Engine 4 (18)
      • Unity (0)
    • Physically Based Rendering (0)
    • FilmMaking (0)
    • 잡다 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
ted0505

Computational Art & Study

Coding/HTML5

[HTML5] 웹을 의미있게 만드는 Semantic tag (시멘틱 태그)

2022. 9. 16. 02:21

Semantic tag 란 무엇일까

  • Semantic = 의미론적
    • 시멘틱 태그는 직역한 그대로 "의미론적인 태그" 를 의미한다.
    • 태그는 태그인데, 아무 뜻, 의미가 없는 태그가 아닌 좀 더 뜻이 담긴, 의미가 있는 태그를 말하는 것이다.
  • 태그로 영역을 나누는 것보단, header, article, footer 와 같은 태그를 사용해 좀 더 기계가 이해하기에, 개발자가 이해하기에 직관적인 태그를 사용하는 것이 보기 좋은 코드를 작성하는 것에 도움이 된다.

Semantic tag 의 장점 3가지

1. SEO (Search Engine Optimization) 검색 엔진 최적화

  • SEO (검색 엔진 최적화)에 좋은 영향을 줄 수 있다.
    • 검색 엔진은 시멘틱 태그들을 중요한 키워드로 인식하여 검색 랭킹에 영향을 준다.
    • 즉, 해당 웹페이지에 적절한 위치에 의미론적인 태그를 작성한다면 SEO 에 좋은 영향을 줄 수 있다.

2. 웹 접근성 (Accessibility)

  • 시각 장애가 있는 사용자가 시각적으로 보는 것이 아닌 스크린 리더, 키보드로만 접근할 때에 판독기가 의미론적 태그들을 인식하여 잘 동작 할 수 있다.

3. 개발자 경험

  • 웹 페이지를 완성하는 기계도 의미론적인 태그를 이해하여 만들겠지만, 이 소스코드를 작성하는 개발자에게 좋은 경험이 될 것이다.
    • 의미론적인 태그를 사용하면 해당 태그안에 어떤 내용들이 담겨야하는지 소스코드를 처음 보는 개발자도 알 수 있고, 빠른 인식과 수정이 가능할 것이다.
    ted0505
    ted0505

    티스토리툴바