Semantic Tag 시맨틱 태그 (부제: 언제까지 div 태그만 쓸거니?)

프론트엔드 개발/html

Semantic Tag 시맨틱 태그 (부제: 언제까지 div 태그만 쓸거니?)

Ella Seon 2022. 8. 31. 17:04

멋쟁이사자처럼 프론트엔드 스쿨3기에서 공부한걸 바탕으로 정리한 내용입니다.

비판은 언제나 환영입니다!! 가르쳐주세요 ㅠㅠㅠㅠ 공부한지 2달도 안된 새내기 개발자 준비생🐥🐥

html을 공부해본 사람은 알것이다.

div 의 지옥을 말이다.

아래 태그는..내가 실습하고 있는 div로 뒤범벅 된 실습자료

<body>
  <div class="container">
    <div class="left-box">
      <div class="small-box">
        <img src="./profile.png" alt="프로필" class="profile">
          <div class="mini-box">
            <p>아우리</p>
            <p>1시간 전</p>
          </div>
      </div>
      <div class="large-box">
        <h2>4K 빔프로젝터 가성비 최강으로 선택했어요</h2>
        <p> 
        4K빔프로젝터 가성비 최강으로 선택했어요. 날씨가 날씨인지라 요즘 마음이 싱숭생숭한게
        가을 타는 사람이 아닌 봄을 타고있었어요.하루하루 시간이 모의미하게 흘러가는 거 같고
        재미있는걸 찾지 못해 이리저리 헤매는 사람처럼 즐거운걸 못찾고있
        </p>
      </div>
    </div>
    <div class="right-box">
      <img src="./bim.jpg" alt="" class="bim">
    </div>
  </div> 
</body>

결과페이지는 아래와 같다.

✅ div 로만 뒤범벅된게 뭐 어째서??

div 는 그냥 박스, 의미가 없는 태그다.

웹브라우저 입장에서 생각해보면 div로만 꾸며진 문서는 어떤의미인지 정확하게 구분을 할수가없다.

사람들이 div 로 꾸며진 코드를 보았을때는 class 이름을 가지고 이건 어떤의미네?

하고 판별할수있지만. 웹브라우저 즉, 컴퓨터 입장에서는 class를 보고서 바로바로 알아들을수가 없다.

그래서 이들이 알아듣기위해, 의미있는 태그를 쓰기로 HTML5부터 약속했는데!!
(2014년 10월 28일에 등장한 따끈따끈한 녀석이다.)

의미있는 태그란 이제 등장할

시맨틱태그라고 부른다.

✅시맨틱태그(Semantic Tag)

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사

div 는 의미가 없지만 <header><main><footer>를 쓰면 의미있는 태그가 된다!

<header><main><footer> 이런 태그들은 디자인적으로는 div 와 같이 차이가 없지만

의미적으로만 차이가 있다. div 태그와 마찬가지로 하위 자식 태그들을 묶는 것의 기능은 같은데

의미만 다른것이다!

✅근데 의미있는 태그를 쓰면 뭐가 좋은데?

1) 검색엔진최적화(SEO) : 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그르 사용하는 것이 중요하다.

& 검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그럴 때, 의미있는 태그를 사용하면 좀 더 정확한 구조로 분석할 수 있도록 도울 수 있다
2) 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.
3) 시맨틱 태그를 사용한 코드 블록을 찾는 것은 끝없는 div(div > div > div ...)를 탐색하는 것보다 훨씬 쉽다.

✅ 이제 시맨틱태그를 살펴보자!!!