image source
리액트를 사용해서 코드를 작성할때, css라이브러리를 사용하는걸 너~~~무너무 좋아한다.
실제로 로직을 구현하고, 구조를 고민하는 시간보다 css에 들어가는 시간과 노력이 더 많다고 느꼈고 실제로도 그런거 같다 체감상.
style component를 사용해도 여전히 시성비가 안나온다고 생각하던 찰나에 마치 python을 처음 접했을때의 기분을 다시 느끼게 해준게 css라이브러이 였다.
근데 여기서 문제가 생겼는데, NextJS를 공부하려는데 내가 사용하던 css라이브러리를 NextJS에서 사용을 못한다. ㅎㅎ
그래서 tailwind를 사용하는데, 참 이게 강의를 보는것마다 죄다 모든 코드를 <div>로 갈겨버리는데 진짜 환장할거같다는거지?
<div>로 죄다 갈겨버리니까 가독성이 증말 그지같다,
css라이브러리를 사용할때는 <Box>, <Center>, <Stack> 처럼 같은 block 속성이지만 이름만보고 바로 어떤 부분의 코드구나 유추가 가능했는데,
죄다 <div>로 갈겨놔, className에 tailwind class이름 다 갈겨놔, 진짜 한눈에 안들어오고 화가 그득그득 났다.
그래서 내 코드라도 작성할때 좀 더 가독성 좋게 작성하고 싶었다.
그런 의미로 시맨틱 태그를 알아보려고 한다.
프로그래밍에서,시맨틱은 코드 조각의 의미를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"
mdn web docs에서 위처럼 설명하고 있는데, 좀 더 알아보자.
시맨틱 이란?
시맨틱(sementic)이라는 단어는 무엇을 의미할까?
시맨틱 단어 그 자체에는 "의미의, 의미론적인" 이라는 뜻이 담겨져 있는데, 시맨틱 태그는 태그 내용에 의미를 부여하는 태그라고 할 수 있다.
즉, 시맨틱 태그는 HTMl구조를 설계하는데 있어 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어 진것!
HTML5 이전에는
<div>,<span>과 같이 콘텐츠 보유 역할은 하지만, 포함된 콘텐츠의 유형이나 해당 콘텐츠가 페이지에서 수행하는 역할에 대해서는 별도로 표시하지 않는 태그를 사용했다.
따라서 구조를 구분하기 위해 id또는 class 등으로 구분했지만, HTML5에서는 시맨틱 태그의 등장으로 보다 명시적이면서 직관적인 구조의 설계가 가능해진것
이미지 출처: https://www.semrush.com/blog/semantic-html5-guide/
시맨틱 태그의 종류들을 알아보기 이전에, 왜 사용해야 하는지 먼저 알아보자.
시맨틱 태그의 이점
1. 접근성 향상
시맨틱 태그를 사용하면 페이지의 접근성이 향상된다.
HTMl 시맨틱 태그 요소는 사람들이 웹페이지를 탐색하고 페이지와 상호작용하는데 도움이 되는 화면 판독기, 음성명령 등등 유용한 정보와 단서를 제공한다.
예를 들어서 <nav>의 경우 콘텐츠에 탐색 링크가 포함되어 있음을 나타낼 수 있고, <article>의 경우에는 독립형 콘텐츠가 포함되어 있음을 나타낼 수 있다.
2. SEO(검색엔진최적화) 향상
SEO는 Goolge과 같은 검색엔진 상에서 웹사이트 순위에 영향을 미치는데, 시맨틱 태그는 관련 키워드와 문구에 대해 웹페이지를 최적화 하는데 도움이 되고, 더 높은 트래픽을 유도할 수 있다.
3. 가독성 향상
시맨틱 태그를 사용하면 웹페이지의 가독성 또한 향상되는데,
사람들이 콘텐츠를 더 쉽고 빠르게 이해하고 소비할 수 있게 된다.
즉 콘텐츠의 명확하고 일관된 흐름과 구조를 만드는데 도움이 된다.
(당연히 <div>만 휘갈기거나, <span>에 display: block이런짓 안해도 되니까)
HTML Semantic Tags for Structure
이미지 출처: https://www.semrush.com/blog/semantic-html5-guide/
-
<header>: 문서나 섹션의 머릿글을 지정하며, 로고, 탐색, 제목 및 기타 소개 정보가 포함된 페이지 상단 부분을 정의. 여기에는 메타 태그 정보, 키워드, 심지어 가져온 CSS 파일이나 스타일 시트도 포함되는 경우가 많음 -
<nav>: 탐색 링크에 사용되고,<header>태그와 중첩이 될 수 있지만 보조 탐색<nav>태그도 일반적으로 사용된다 -
<main>: 페이지의 본문인 주요 콘텐츠가 포함되어 있어야 하고 페이지당 하나의 태그만 있어야 함.<article>, <aside>, <footer>, <header>, <nav>등 모든 페이지의 태그 앞에 위치 -
<article>: 독립적인 글을 다루는데 사용하는 태그. 블로그 게시물, 뉴스기사, 제품리뷰 등등 독립적으로 배포하거나 재사용할 수 있는 독립형 콘텐츠를 정의 -
<section>: 태그는 문서의 부분을 의미하는 태그로, 기본 콘텐츠 내의 특정 주제 또는 부제목과 관련된 주제별 콘텐츠 그룹을 정의.<section>안에<section>을 넣을 수도 있고,<article>을 이용해 내용을 넣을 수도 있음 -
<aside>: 옆에 위치하는 콘텐츠를 담는 태그로, 주로 문서에서 사이드바를 놓기 위해 사용함 -
<detials>: 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그. 사용자와 상호작용이 가능하고 사용자가 버튼을 통해 열고 닫을 수 있음 -
<figure> & <figcaption>:<figure>는 일러스트레이션, 다이어그램, 사진, 코드 목록처럼 자체 포함된 콘텐츠를 지정하고,<figcaption>은<figure>요소에 대한 설명을 추가하기 위해 사용함 -
<footer>: 문서 또는 섹션의 바닥글을 지정하고 문서의 맨아래쪽에 위치. 일반적으로 연락처 정보, 사이트 맵, SNS링크 같은걸 추가되는 부분임
HTML Semantic Tags for Text
-
<h1>: 최상위 제목을 표시하는 태그. 일반적으로 페이지당<h1>태그는 하나만 있다 -
<h2> to <h6>: 중요성에 따른 서브타이틀. 한페이지에 동일한 수준의 제목이 여러개 있을 수 있다 -
<p>(paragraph): 독립된 텍스트 단락(문단) -
<a>(anchor): 한페이지에서 다른페이지로 이동할때(하이퍼링크) -
<ol>(ordered list): 특정 순서로 표시되는 항목들의 리스트 -
<ul>(unordered list): 특정 순서로 표시할 필요가 없는 항목들의 리스트 -
<li>(list item):<ol>또는<ul>내부에 위치해 단일 항목을 표시 -
<q> / <blockquote>: 인용문으로 짧은경우는<q>를 사용하고 여러줄로 된 긴 인용문은<blockquote>를 사용 -
<em>: 강조해야할 텍스트에 사용 -
<strong>: 강하게 강조해야할 텍스트에 사용 -
<code>: 컴퓨터 코드 블럭에 사용
더 많은 태그들
참고
