시맨틱 태그(Semantic Tag)란!

Lemon·2022년 4월 22일
TILhtml면접질문
0

HTML

목록 보기
1/1
post-thumbnail

Semantic : 의미의, 의미가 있는

📚시맨틱 웹(Semantic Web)이란?

단어의 뜻처럼 의미가 있는 웹을 말합니다. 기계가 이해할 수 있는 형태로 제작된 웹을 의미하며, 웹에 존재하는 많은 데이터에 '의미'와 '관련성'을 가진 거대한 데이터 베이스를 구축하고자 하는 발상합니다. 시맨틱 웹을 고안해서 시맨틱 태그가 나오게 되었습니다.

📚시맨틱 태그(Semantic Tag)란?

Semantic Tag는 Semantic Markup이라고도 불립니다.
단어의 뜻처럼 의미가 있는 태그를 말합니다.
HTML5에 새롭게 도입된 태그입니다.

HTML5 이전

HTML은 <div> 태그에 id나 calss를 정의해서 사용했습니다. (div, span 태그는 시맨틱태그가 아닙니다.) 이는 개발자가 원하는 이름을 지정했기 때문에 검색엔진이 정확하게 어떤 의미의 컨텐츠인지 구별하기가 힘들었습니다.

HTML5 이후

시맨틱 태그를 통해서 브라우저도 의미있게 이해하고, 개발자도 의미있게 이해할 수 있게 되었습니다.


🍋시맨틱 태그의 사용 전 후

시맨틱태그 사용 전 후

[👎🏻BAD] 시맨틱 태그의 사용 전

<span class="big">Top level heading</span>
.big {
	font-size: 32px;
	margin: 16px 0;
}

[👍🏻GOOD] 시맨틱 태그의 사용 후

<h1>Top level heading</h1>

두 방법은 모두 화면에 동일하게 구현되지만 코드의 길이도 다르고, 의미도 다릅니다.
<h1>태그를 사용하면 따로 스타일을 주지 않아도 제목으로 인식하여 스타일을 자동으로 적용해줍니다.


🍋시맨틱 태그가 중요한 이유

1. SEO : 검색 최적화

웹 사이트는 사람들이 필요한 정보를 찾기 위해 검색해서 사용합니다. 검색 결과를 보여주기 위해 검색엔진을 사용하는데, 검색엔진은 HTML 코드를 분석해서 노출시킵니다. 따라서 의미에 맞는 시맨틱 태그들을 사용하여 HTML을 잘 작성해야 잘 노출될 수 있습니다.

2. 웹 접근성

스크린 리더를 이용하거나 키보드만을 이용해서 만든 웹사이트를 이용하는 경우 시맨틱 태그로 잘 작성된 HTML이라면 문제없이 동작할 수 있습니다.

3. 유지보수성

개발자의 의도를 담아서 작성되기 때문에 다른 개발자들이 코드를 읽을 때 코드의 의미를 파악하기 쉬워집니다. 따라서 유지보수가 편리해집니다.


🍋시맨틱 태그의 종류와 사용

  • <header>
    웹사이트의 브랜드를 나타내줄수있는 로고나, 사용자들을 위한 메뉴아이템들이 들어있다면 div 대신에 header 을 사용해주는 것이 좋습니다.

  • <nav>
    <header>안에 메뉴가 모여있다면 <div>대신 <nav>를 사용하는 것이 좋습니다.

  • <main>
    중요한 컨텐츠를 가지고 있는 부분은 main을 사용하는게 좋습니다.
    <main>안에서도 <div>로 모든걸 나누기 보다는 필요에 따라서 <article>과 <section>을 이용한다면 조금 더 구조적으로 웹사이트를 구성해볼 수 있습니다.

  • <aside>
    페이지의 컨텐츠와 직접적으로 상관은 없는 부가적인 내용이 담겨있는곳이 필요하다면 <aside>를 이용해서 광고나 페이지와 연관된 다른 링크들을 담아놓으면 좋습니다.

  • <footer>
    웹사이트 가장 아래 부가적인 정보나 링크들이 모여있다면 footer을 사용해주는 것이 좋습니다.

더 많은 시맨틱 태그의 종류 보기 👉🏻 https://developer.mozilla.org/ko/docs/Web/HTML/Element


🍋<article> VS <section>

<article>

블로그 포스터에서 포스트 하나, 신문 기사에서 기사 하나 같이 하나 그 자체를 묶어줄때 사용합니다. 이 자체만으로 독립적으로 다른페이지에 보여줄때 전혀 문제가 없을 때 사용할 수 있습니다.
즉, <main>안에 있는 다른 내용들과 전혀 상관없이 독립적으로 고유한 정보를 나타낼때 사용합니다.

<section>

<article> 내용중에 서로 연관있는 내용들을 묶어주고 싶다면 그럴 때 section을 이용할 수 있습니다.

<article>
	<section>연관있는 내용들</section>
</article>

<main> 안에서나 <article> 안에서나 아무곳에서나 연관있는 내용들을 하나로 묶어줄 때 사용합니다.

<main>
	<section>
		연관있는 내용들
		<article></article>
	</section>

	<section>
		연관있는 내용들
	</section>
</main>

🍋<i> VS <em>

스크린 리더로 읽힐 때 차이가 납니다.

<i>

이탤릭체를 시각적으로만 사용하고 싶을 때 사용합니다.

<em>

이탤릭체를 강조하고 싶을 때 사용합니다.


🍋<b> VS <strong>

스크린 리더로 읽힐 때 차이가 납니다.

<b>

시각적으로만 볼드체를 사용하고 싶을 때 사용합니다.

<strong>

강조하는 볼드체에 사용합니다.


🍋<ol> VS <ul> VS <dl>

<ol>

순서가 표시된 목록입니다.
순서가 중요할 때 사용합니다.

<ul>

순서가 없는 목록입니다.
순서가 중요하지 않을 때 사용합니다.

<dl>

단어에 대한 설명이 묶여있는 목록입니다.
정의, 설명에 대한 리스트를 만들 때 사용합니다.


🍋<img> VS css:background-image

<img>

웹 페이지 안에서 하나의 중요한 요소로 자리잡고 있을 때 사용합니다.

background-image

문서의 내용과는 별개로 스타일링 목적을 위해서 배경이미지로 사용하는 경우 사용합니다.
이미지가 없어도 문서를 읽고 이해하는데는 전혀 지장이 없을 때 사용합니다.

🌟check! 면접에서 자주 다루는 질문입니다.


🍋<button> VS <a>

<button>

특정한 액션을 위해서 사용합니다.
사용자가 클릭했을 때 어떤 특정한 행동이 발생하는 경우에 사용합니다.

<a>

어딘가로 이동할 때 (링크가 걸려있는 경우) 사용합니다.


🍋<table> VS <CSS>

<table>

행과 열을 사용한 데이터를 나타낼 때 사용합니다.
레이아웃을 잡기 위해 사용하는 것은 좋지않습니다.
문서안에서 자체적으로 의미있는 태그로 사용하는것인지 스타일을 위해서 사용하는건지 파악하는게 중요합니다.

CSS

flex나 grid를 이용해서 레이아웃을 잡을 경우 <table>아닌 css를 사용합니다.


✍🏻최종 정리

  • 시맨틱 태그란 의미가 있는 태그를 말합니다.
  • 시맨틱 태그가 중요한 이유
    - SEO 검색 최적화를 위해
    - 웹 접근성을 위해
    - 개발자들의 유지보수성을 높이기 위해
  • 시맨틱 태그의 종류
    <header>
    <nav>
    <main>
    <article>
    <section>
    <aside>
    <footer>
  • 시맨틱 태그는 따로 정답이 존재하진 않습니다. 내가 나타내고자 하는 컨텐츠를 좀 더 의미있는 태그를 사용할 수 없을지 고민해보는게 좋을 것 같습니다.

참고
HTML 태그들, 헷갈리는거 정리해 보았다 🥳 (시맨틱 태그, 중요한 태그들 모음)
Semantic Tag 와 헷갈리는 tag들 정리
[HTML5] 시맨틱 태그(Semantic Tag)란?
시맨틱 태그
Semantic Web, Semantic Tag 이해

profile
Lemon
개미는 뚠뚠..오늘도 뚠뚠🐜

0개의 댓글