[TIL] HTML | Semantic Web, Semantic Tags 📙

dosilv·2021년 4월 12일

🎲 목표: 정보의 의미를 강화하는 semantic HTML 이해하기!

🔎 Semantic이란?

코딩에서 시맨틱(Semantic)이란 코드의 구조와 의미를 말한다. "이 코드가 어떻게 화면에 표시될지"가 아닌, "이 코드가 여기서 어떤 역할인지, 어떤 의미를 갖는지"에 대한 답이라고 할 수 있다.

따라서 시맨틱 태그(Semantic Tag)는 요소의 의미를 담고 있는 태그이고, 시맨틱 웹(Semantic Web)은 컨텐츠의 의미를 설명하는 의미론적 웹으로 볼 수 있다. 시맨틱 요소로 구성된 웹과 그렇지 않은 웹은 표면상으로는 똑같아 보일 수 있지만, 데이터로서의 가치는 확연히 다르다.

예를 들어 문서에서 강조하고 싶은 내용이 있을 때, 글자를 키우고 굵게 만드는 방법에는 두 가지가 있다.

1. <h1>태그를 사용하는 것
<h1>강조할 내용</h1>
2. 직접 css의 font-size 및 font-weight 속성을 설정하는 것
<span style="font-size: 2em; font-weight: bolder;">강조할 내용</span>

위의 두 코드로 화면상에 표시되는 텍스트는 같지만, 의미론적으로 1번의 요소는 문서내에서 중요성을 가지는 반면 2번 요소는 다른 요소들보다 특별히 중요하게 취급되지 않는다. 단지 눈에 보이는 폰트의 사이즈와 굵기만 조절되었을 뿐이다. 이러한 차이는 컴퓨터가 데이터를 처리하는 과정에 영향을 주고, 검색엔진 최적화(Search Engine Optimization, SEO)와도 관련된다.
결론적으로 시맨틱 태그를 적절히 사용하면 데이터를 의미와 중요도에 따라 구조화해서 더욱 가치있게 제공할 수 있음!

🔎 Semantic Tag의 종류

<div>, <span>과 같은 non-semantic tag는 그 컨텐츠에 대해 어떠한 정보도 주지 않는다. 반면 <form>, <table>, <img> 등의 semantic tag는 각 요소가 어떤 역할을 하는지 컨텐츠를 보지 않아도 알 수 있다.

<form>: 정보 제출을 위한 대화형 컨트롤을 포함하는 문서 구획
<table>: 행과 열로 이루어진 표 형식의 데이터
<img>: 이미지 요소

HTML5에서 새로 추가된 semantic tag

<header>: 문서나 섹션의 머릿글
<main>: <body> 요소의 자식으로서 문서에서 오직 한번만 사용 가능
<section>: 본문의 여러 내용(article)을 포함하는 공간 (형식상 구분)
<article>: 본문의 주내용이 들어가는 공간 (내용상 구분)
<aside>: 링크, 광고, 사이드바 등 페이지 주요 컨텐츠 이외의 컨텐츠
<details>: 사용자가 보거나 숨길 수 있는 추가 세부 정보
<figure>: 일러스트레이션, 다이어그램, 사진, 코드 목록 등 자체포함된 컨텐츠
<footer>: 문서나 섹션의 바닥글 (주로 저작권, 연락처 정보 등)

🔎 img VS. background-image

Qustion.

사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.

1. 차이점

html / css
img는 html 태그 자체에 이미지를 컨텐츠로서 삽입하는 방식인 반면, background-image는 non-semantic 태그인 div의 스타일 요소로서 배경 이미지를 주는 방식이다. 따라서 전자는 css를 통해 src를 바꾸는 것이 불가능하지만, 후자는 가능하다 (hover시 이미지 변경 등)
alt
img에는 alt라는 속성값이 있는데, 이를 통해 이미지를 불러오는 데 실패할 경우 대체 텍스트를 제공할 수 있다.
width
img의 width를 조정하면 이미지의 사이즈가 비율을 유지한 채 바뀌지만, div의 width를 조정하면 background-image의 사이즈는 고정되어 있고 표시되는 영역의 크기만 바뀐다. 즉 이미지가 잘리거나 여백이 남게 된다.

2. html의 img 태그를 사용하면 좋은 경우

이미지 자체가 컨텐츠로서 의미를 가질 때
이미지를 검색엔진에 노출시키고 싶을 때

3. css의 background-img 속성을 사용하면 좋은 경우

이미지가 컨텐츠가 아닌 단순한 페이지 꾸밈 용도일 때
이미지 위에 텍스트 등의 다른 컨텐츠를 표시하고 싶을 때

dosilv

DevelOpErUN 성장일기🌈

이전 포스트

[TIL] WEB의 개념 / LAMP와 CGI를 이용한 Python-WEB 연동 📔

다음 포스트

[TIL] CSS | 레이아웃의 모든 것 📙

2개의 댓글

Young Geon

2021년 4월 13일

잘 보고 갑니다 도은님 깔끔한 정리가 도움이 많이 되었습니다!

1개의 답글