HTML 시맨틱 태그

나랭·2024년 9월 21일
0

사실 프로젝트를 하다보면 HTML 태그를 사용하면서 크게 고민하지 않고 div 태그를 많이 사용했었다ㅠ
이번 기회에 HTML 시맨틱 태그를 다시 한 번 정리해보면서 최대한 div 태그 외에 요소에 적합한 태그를 사용하려고 했다.


HTML

Hyper Text Markup Language (Hyper Text (웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어)

  • HTML문서는 html이라는 태그로 시작해서 html태그로 끝난다.
  • HTML은 계층적이다
    • 브라우저는 HTML정보를 tree 구조로 보관하고 있다(DOM Tree)
  • HTML은 적절한 tag를 사용해서 구조를 만든다.
    • head 태그 : html문서의 meta정보
    • body 태그 : 화면에 보여지기 위한 정보

HTML 시맨틱 태그란?

포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그

  • HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와준다!
  • HTML5부터 시맨틱 태그가 등장하게 됨

Semantic HTML
사진 출처 시맨틱 태그란? - 태그 요소의 종류와 이점

시맨틱 태그 요소의 종류

  • 콘텐츠의 의미와 기능에 따라 콘텐츠의 각 부분에 적합한 요소들을 선택

💡 스타일 지정이나 스크립팅 목적으로 필요한 경우를 제외하고는 <div>와 같은 의미가 없는 요소나 속성을 사용하지 않아야 한다!

<header>로고나 제목 등이 포함된 페이지 상단
<footer>저작권이나 연락처, 소셜 미디어 계정 링크가 포함된 하단
<main>페이지의 주요 콘텐츠를 감쌈
<section>페이지를 여러 주제나 하위 제목 등 목록을 형성
<article>독립적인 글을 다루는 데 사용하는 태그(블로그 게시물, 뉴스 기사, 제품 리뷰 등 독립적으로 배포하거나 재사용할 수 있는 독립형 콘텐츠)
<aside>옆에 위치하는 콘텐츠를 담는 태그(페이지 콘텐츠를 제외한 콘텐츠를 정의, 사이드바)
<details>사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그(사용자는 버튼을 통해 열고 닫을 수 있음)
<summary><details> 태그의 첫 번째 하위 항목, 보이는 부분을 담당
<figure>일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정
<figcaption><figure> 요소에 대한 캡션을 정의하며, 문서에서 사진의 설명을 추가하기 위해 사용
<nav>웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 정의

시멘틱 태그의 장점

  1. 페이지의 접근성이 향상
    • 스크린 리더 사용자에게 정보 전달 가능
    • 화면 판독기, 키보드 또는 음성 명령과 같은 보조 기술에 대한 유용한 정보와 단서를 제공 가능
  2. SEO (검색엔진최적화)
    • 관련 키워드와 문구에 대해 웹페이지를 최적화하는 데 도움
  3. 가독성 향상

참고 블로그

시맨틱 태그란? - 태그 요소의 종류와 이점

profile
안녕하세요! 나랭입니다😉

0개의 댓글