Semantic Tags : 의미 있는 태그
1. "Semantic Tags" 가 중요한 이유
-
Seo (검색엔진최적화) : 웹사이트와 웹페이지를 검색엔진이 쉽게 발견(discovery)하고, 읽어가서(crawling), 색인하고(indexing), 상위 노출(ranking) 시켜 자연 유입되는 트래픽의 양과 질을 높일 수 있도록 관련 검색 알고리즘의 특성을 고려해서 웹사이트의 구조나 콘텐츠를 개선하는 일련의 작업을 말한다.
-
Accessibility (웹 접근성) : 웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것
-장애인 및 고령자 등을 포함한 모든 사람 / 다양한 플랫폼 및 장치, 웹 브라우저 등의 모든 환경 -
For us, Maintainability (개발자들을 위해서) : 한눈에 어떻게 웹사이트가 짜여져 있는지 알아볼 수 있기 위해, 즉 가독성 향상.
-유지보수성도 더 높여서 짤 수 있다
🧷 코드 비교
None-semantic tag<body> <div class="header">Header 영역</div> <div class="nav"> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> </ul> </div> <div class="main">Content 영역</div> <div class="footer">Footer 영역</div> </body>semantic tag
<body> <header>Header 영역</header> <nav> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> </ul> </nav> <main>Content 영역</main> <footer>Footer 영역</footer> </body>= 훨씬 가독성이 좋아진다
2. 중요한 태그들 모음
- <header> : 소개 및 탐색에 도움을 주는 콘텐츠
- 제목, 로고, 검색 폼, 작성자 이름 등의 요소
- <nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냄
- 메뉴, 목차, 색인
- <footer> : 가장 가까운 구획 콘텐츠 나 구획 루트의 푸터 를 나타냄 (사용 예시 : 부가적인 정보, 링크)
- 구획의 작성자,저작권 정보, 관련 문서 등
- <main> : 문서 body 의 주요 콘텐츠를 나타냄.
- <aside> : 문서의 주요 내용과 간접적으로만 연관된 부분 / 별도 구획요소
- 주로 사이드바 혹은 콜아웃박스로 표현
- <article> : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냄
- 게시판과 블로그 글, 매거진이나 뉴스 기사 등
- <section> : HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용함
- 제목을 포함할때도 있음.
- <details> : 추가적인 정보를 나타내거나 사용자가 요청하는 정보를 나타냄.
- <summary> : 부모요소인 details 요소의 내용에 대한 요약이나 캡션등을 나타냄.
- 캡션 : 사진의 설명문
- <figcaption> : 부모요소인 figure 요소의 내용들에 대한 캡션,혹은 제목을 나타냄.
- <figure> : 일러스트, 다이어그램, 사진, 코드 등에 주석을 다는 용도로 사용됨.
- <mark> : 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조목적으로 마킹되거나 하이라이트된 텍스트를 표현함.
- <time> : 24시간에서의 시간 혹은 그레고리력에서의 정밀한 날짜를 나타냄.
* 그레고리력 : 윤년을 포함하는 양력
3. <article> vs <section>
<article> : <main> 안에 있는 내용들과 상관없이 독립적으로 고유한 정보를 나타낼 때 사용.
<section> : <article>, <main> 또는 아무곳에서 연관있는 내용을 묶어줄 때 사용.
4. <i> vs <em>
<i> : 시각적으로만 이탤릭체 (ex: 인용구)
<em> : 강조하는 이탤릭체 (ex: 책의 제목)
5. <b> vs <strong>
<b> : 시각적으로만 볼드체
<strong> : 정말 중요한 볼드체
6. <ol> vs <ul> vs <dl>
목록을 나타낼 수 있는 태그들
<ol> : 순서가 중요한 목록을 나타낼 때 사용 / 보통 숫자목록으로 표현
<ul> : 순서가 없는 단순한 목록을 나타낼 때 사용 / 보통 불릿으로 표현
<dl> : 어떤 한 단어에 대해서 설명이 묶여있을 때 사용 / <dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성
- <dt> : 설명 혹은 정의 리스트에서 용어를 나타냄 / 부모 <dl>
- <dd> : <dt> 에 나온 용어에 대한 설명 ,정의 또는 값을 제공 / 부모 <dl>
👾 주의사항
- <dl> 태그는 하나이상의 <dt>-<dd> 쌍의 태그를 갖고 있어야한다.
단, <dt>-<dd> 태그가 반드시 하나의 짝으로 지어져야 하는 것은 아니다.
- <li>,<dt>-<dd> 태그는 밖에서 독립적으로 사용할 수 없다.
7. <img> vs CSS : background-image
<img> : 사진이 중요한 요소로 작용해서 문서안에 포함되도록 만들때 사용
CSS : background-image : 이미지가 없어도 문서와 상관없고, 스타일링 목적일 때 사용
8. <button> vs <a>
<button> : 클릭 가능한 버튼 / 버튼을 클릭했을 때, 특정한 행동을 취하게 하기 위해 사용
<a> : 클릭 했을 때, 어디론가(다른 페이지로) 이동할 때 사용
9. <table> vs CSS
<table> : 행과 열로 이루어진 표를 나타냄 / 정말 많은 데이터의 양을 (행+열)을 이용할 때 사용
CSS : 단순한 그리드를 표현하고 싶을 때 (flex, grid) 사용
