[HTML] 시맨틱 태그란?

 

 

시맨틱 태그란?

 

• 시맨틱 태그란 의미가 있는 태그를 말한다. html에서 div 태그만 이용해서 모든 웹사이트를 만들 수도 있지만, 브라우저도 개발자도 의미 있게 이해하기 위해서는 시맨틱 태그를를 적절하게 잘 사용하는 것이 중요하다.
• div나 span과 같이 의미가 없는 태그는 어떤 내용인지 전혀 유추할 수가 없는 반면, 의미가 있는 태그는 내용을 명확하게 정의한다.
• 시맨틱 태그는 HTML5에서 처음 등장하는 태그들이다.

 

🌐 시맨틱 웹 ?

검색 엔진이 보다 효율적으로 데이터를 검색할 수 있게 특정 태그를 사용해서 웹 문서를 제작하는 것을 시맨틱 웹이라고 한다.

 

---

페이지 레이아웃 설정 태그

 

<div>

• 블록 레벨
• 한 덩어리가 개행되어 밑으로 나열
• 웹 문서의 레이아웃을 설정하는 용도로 많이 사용
• <div> 태그를 이용해서 웹 문서의 레이아웃을 자유롭게 구성할 수 있어야 한다.

 

<span>

• 인라인 레벨
• 개행되지 않고 옆으로 나열
• 웹 문서에서 특정한 의미를 나타내지는 않는다.

 

---

1. 시맨틱 태그가 중요한 이유 3가지

 

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

검색 사이트들은 웹사이트를 검색하기 위해 검색엔진을 사용한다. 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 시맨틱 태그를 사용하면 검색엔진에 잘 노출이 되어 좀 더 정확한 구조로 분석할 수 있도록 도울 수 있다. 따라서 의미에 맞는 올바른 태그를 사용하는 것이 중요하다.

 

2. 웹 접근성

웹 페이지를 시각적이 아니라 음성 혹은 키보드만으로 웹 사이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹 사이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있다.

ex) 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.

 

3. 유지보수성

한눈에 구조를 볼 수 있고, 유지 보수성을 높여 개발할 수 있다. 여러 사람과 함께 작업할 때, 굳이 클래스를 지정하지 않아도 영역을 쉽게 알 수 있다.

* 사용할 HTML 태그는 스타일 기반이 아닌 채워질 데이터를 기반으로 결정되어야 한다.
* 어떻게 보여야 하는지는 전적으로 CSS의 책임

 

---

2. non-semantic 태그와 semantic 태그로 구분

콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 여러 요소들을 하나로 묶어 관리하기 편하게하는 태그를 컨테이너 태그라고 한다. 콘텐츠 내용을 구분하거나, 특정 영역마다 공통적인 스타일(css)를 적용하고자 할 때 개발자는 컨테이너 태그를 사용하는 것이 좋다. 컨테이너 역할을 담당하는 태그는 크게 시맨틱 태그와 논-시맨틱 태그로 나뉜다.

 

• 논-시맨틱 태그 : content에 대하여 어떠한 설명도 하지 않는다.

<div>, <span> 태그

• 시맨틱 태그 : content를 명확하게 정의

<h1>, <table> 및 <article> 태그 등

 

*참고
MDN: https://developer.mozilla.org/ko/docs/Web/HTML/Element
W3C: https://www.w3schools.com/html/html5_semantic_elements.asp

---

3. <div> vs <span>  (논-시맨틱 태그)

 

<div>

• 박스 형태로 영역이 설정되고, 그 안에 정렬된다.
• width, height 크기 지정 가능
• 자동 줄바꿈
• margin 속성이 4방향 모두 적용되며, 위 아래 겹쳐지는 여백은 상쇄된다. 즉 여백의 크기가 더해서 2배가 되는 것이 아니라 겹쳐지는 것.

 

<span>

• 줄 단위로 영역이 설정된다.
• inline 속성을 가지기 때문에 width 와 height 를 속성값으로 정해 줄 수 없다.
• 줄바꿈이 되지 않고 옆으로 나열
• margin 속성이 양 옆으로만 적용되며 겹쳐지지 않는다. 가시적으로 더 넓어 보임.

 

---

Box vs Item

 

태그들은 박스가 되거나 아이템이 된다.

 

박스:  header, section, article, footer, nav, aside, main, div, span, form 등

아이템: a, <h1-6>, button, input, label,  table img, vedio, map, canvas 등

 

 

---

4. 웹 페이지 구조를 설계하는 시맨틱 태그

 

1. header
2. nav
3. section
4. article 
5. aside
6. footer
7. main

 

header :

- 제목, 웹사이트를 나타내는 로고, 검색 폼, 작성자 이름 등의 요소, 전체 사이트의 헤더, article에 관련된 헤더.

- 웹 사이트의 최상단이나 좌측에 위치

nav :

- 로그인, 목차 네비게이션 바 영역에 사용하는 태그

- 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는 데 사용

 링크 영역에는 헤더 영역에서의 메뉴나 목차와 같은 요소가 많은데, 내부나 외부를 연결하는 링크가 전부 nav 태그일 필료는 없고, 웹 사이트 주요 탐색 링크 영역만 포함하면 된다.

- header 안에 여러 메뉴가 모여 있다면 div보다 nav를 사용하는 것이 좋다.

 

section :

- 페이지의 내용

- 뉴스헤드라인, 컨텐츠 분류, 본문 바디에서 구간을 나눌 때, 본문안에서 본문끼리의 그룹을 지을 때 사용

- 웹 페이지에서 논리적으로 관련 있는 내용을 구분할 때 사용, 그래서 내용의 제목을 나타내는 hn 태그 중 하나를 포함

 

article :

- 웹 페이지에서 독립적인 영역을 구분할 때 사용

- 보통 제목 태그와 문단 태그를 포함하며, 개별 콘텐츠에 사용하는 태그

 

aside :

- main 안에서도 페이지 콘텐츠와 직접적인 상관은 없는 부가적인 내용을 담아야 할 필요가 있을 때 사용

- aside가 어디에 포함되냐에 따라 사용 용도가 다르다. (ex. 광고, 페이지와 연관된 다른 링크들 등)

footer:

- 필수는 아니지만, 웹사이트 제일 아래에 부가적인 정보들이나 링크들 (ex. 회사소개, 저작권 약관등의 정보)

main :

- 메인 컨텐츠를 갖는 영역

- 웹 문서에서 한번만 사용 가능

 

---

5. 헷갈리는 시맨틱 태그들 정리

<article> VS <section>

 

article : 블로그 포스트에서 포스트 하나, 신문 기사에서 기사 하나, 하나 그 자체를 묶어줄 때 사용된다.

main 안에 있는 내용들과 전혀 상관없이, 독립적으로 정보를 나타낼 때 사용할 수 있다. 이 자체만으로 독립적으로 다른 페이지에 보여주었을 때 전혀 문제가 없을 때 사용할 수 있다. main 안에 있는 다른 내용과 전혀 상관없이 고유한 정보들을 나타낼 때 사용한다.

section : main 안이나 article 안에서 연관 있는 내용들을 묶어줄 때 사용한다.

 

---

<i> vs <em>

 

I : 시각적으로만 이텔릭체 (의미 없음)

ex) 책의 제목, 인용구

em：강조하는 이텔릭체

 

---

<b> vs <strong>

 

b : 시각적으로만 볼드체

strong : 정말 중요한 볼드체

 

---

<ol> vs <ul> vs <dl>

 

ol(ordered list) : 순서가 중요한 목록 (중첩 가능)
ul(unordered list) : 순서가 없고, 단순한 목록 (중첩 가능)
dl(description list) : 어떤 단어에 대한 설명을 묶고 싶을 때, 그 목록을 나타내기 위해 사용
dt (description terms) : 그에 해당하는 단어
dd (description detail) : 그에 해당하는 부가적인 설명

 

---

<img> vs <background-img(css)>

img: 이미지가 웹페이지 안에서 하나의 중요한 요소로 자리 잡고 있을 때 HTML안에 자체적으로 포함되는 것이 좋다.

background-image: 이미지 태그가 문서의 내용과 별개로 스타일링 목적으로 배경 이미지로 사용되는 경우, 문서 일부분이 아닌 경우, css background image를 이용해서 표기하는 것이 좋다.

 

---

<button> va <a>

 

<button>을 쓰든 <a>태그를 쓰든 css로 스타일링을 해놓으면, 다 똑같은 버튼처럼 보이기 때문에 어떤 태그를 쓰는지 헷갈릴 수 있다.

button: 특정한 액션을 위해서 버튼 클릭 시 특정한 행동이 발생할 경우
a: 사용자가 클릭했을 때 다른 페이지로 이동하는 경우 (링크)

 

---

<table> vs CSS

 

table: 행+열 데이터 (단순히 item을 그리드 형식으로 표현할 때는 좋지 않다,)
CSS: CSS Flex, Grid를 이용하여 유연하고 아름답게 스타일링

문서 안에서 자체적으로 의미 있는 태그가 필요한 건지 아니면,
CSS로 스타일링을 목적으로 태그를 사용하는 건지에 따라서 선택하기

 

 

*드림 코딩 유튜브 강의과 책을 보고 정리한 내용입니다.