지금까지 레이아웃을 구성하며 <div>태그만을 남발했었다. 모든 요소들을 div로 처리하려했고, 글자는 p혹은 span등으로 작성해왔다. 시맨틱 태그의 존재를 알았지만 그냥 편해서 큰 차이를 못느껴서 죽어라 div만 사용해서 아래와 같은 모양을 만들었던 것 같다..
과거의 나는 뭘 한거지..
시맨틱 태그란?
‘시맨틱’은 코드 조각의 ‘의미’를 나타낸다. HTML에서는 이 요소가 가진 목적과 역할은 무엇인가?를 생각해 볼 수 있다. 결국, 의미와 목적에 맞는 시맨틱 태그를 활용하여 문서의 구조와 내용을 더 이해하기 쉽고 의미있게 만드는 것을 의미한다.
시맨틱 태그 종류
글자 관련 요소
<h1> ~ <h6>: 제목.<h1>은 가장 중요한 제목,<h6>은 가장 덜 중요한 제목.<p>: 단락. 텍스트를 단락으로 묶을 때 사용.<span>: 인라인 텍스트 구간을 정의. 스타일링이나 스크립팅에 사용.<strong>: 강조된 텍스트. 브라우저는 이를 굵게 표시함.<em>: 이탤릭체로 강조된 텍스트.<a>: 하이퍼링크. 다른 페이지나 URL로 연결.
구조 관련 요소
<div>: 블록 레벨의 컨테이너. 레이아웃이나 스타일링 목적으로 사용.<ul>: 순서 없는 리스트.<ol>: 순서 있는 리스트.<li>: 리스트 항목.<ul>또는<ol>안에 사용.<header>: 문서나 섹션의 머리말.<nav>: 내비게이션 링크 목록.<main>: 문서의 주요 콘텐츠. 전체 페이지에서 한 번만 활용할 수 있음.<section>: 주제를 나누는 구획.<article>: 독립적으로 구분 가능한 콘텐츠.<aside>: 부가적인 콘텐츠.<footer>: 문서나 섹션의 바닥글.<hr>: 주제의 전환을 나타내거나 내용과 내용을 구분.
폼 관련 요소
<form>: 사용자 입력을 받을 수 있는 폼을 정의.<input>: 다양한 타입의 사용자 입력 필드를 정의.<input type="text">: 텍스트 입력 필드.<input type="password">: 비밀번호 입력 필드.<input type="email">: 이메일 입력 필드.<input type="file">: 파일 업로드 필드.<input type="checkbox">: 체크박스.<input type="radio">: 라디오 버튼.<input type="submit">: 폼 제출 버튼.
<textarea>: 여러 줄의 텍스트를 입력할 수 있는 필드.<button>: 클릭 가능한 버튼.<select>: 드롭다운 리스트를 정의.<option>:<select>요소 내에서 옵션을 정의.<label>: 폼 요소에 대한 레이블을 제공.
멀티미디어 및 기타 요소
<img>: 이미지를 삽입.src속성과alt속성을 사용.<audio>: 오디오 콘텐츠를 삽입.<video>: 비디오 콘텐츠를 삽입.<source>:<audio>또는<video>요소 내에서 미디어 파일의 경로와 형식을 지정.<iframe>: 다른 HTML 페이지를 현재 페이지에 삽입.
스크립트와 링크
<script>: JavaScript 코드를 삽입하거나 외부 스크립트를 포함.<link>: 외부 리소스를 현재 문서와 연결. 보통 CSS 파일을 연결할 때 사용.<style>: CSS 스타일 규칙을 삽입.
메타데이터
<meta>: 문서에 대한 메타데이터를 정의.<title>: 문서의 제목을 정의.
시맨틱 태그를 사용해야 하는 이유
- 웹 접근성 향상
- 검색엔진 최적화 (SEO)
- 가독성 및 유지 보수
웹 접근성 향상
각 목적에 맞는 시맨틱 태그를 활용하면, 해당 요소가 무엇을 나타내는지 알 수 있다. 예를 들어, <nav> 태그는 네비게이션 바임을 알 수 있고, <h1> 태그는 이 웹페이지의 주요 제목임을 알 수 있다. 대충 보면 알 수 있지만, 마우스 사용이 어려운 경우나 고령자 혹은 장애를 가진 사람들을 위한 스크린 리더기를 사용하는 사람이라면, 페이지의 구조나 내용을 더 효과적으로 전달할 수 있다.
검색엔진 최적화 (SEO)
검색엔진을 최적화한다는 말은, 검색엔진이 콘텐츠를 이해하도록 돕고, 사용자가 사이트를 찾고 검색엔진을 통해 사이트를 방문할지 여부를 결정할 수 있도록 도와주는 것이다. 시맨틱 태그를 활용함으로써 웹 사이트의 구조와 내용을 SEO가 파악하여 더 많은 트래픽이 몰리도록, 사용자가 유입될 수 있도록 도와준다. 게다가, 웹페이지의 성능과 속도를 향상시켜주기도 한다.
가독성 및 유지 보수
사용자 입장에서는 콘텐츠를 더 쉽고 빠르게 이해할 수 있고 페이지의 흐름을 파악할 수 있다. 개발자 입장에서는 해당 요소가 무엇을 뜻하는지 확인할 수 있어 이후에 다시 보거나 다른 개발자가 이를 확인했을 때 빠르게 의도를 파악할 수 있어 수정할 일이 있을 때 쉽게 보수할 수 있다.
결론적으로, 시맨틱 태그는 요소를 설계할 때, 해당 컨텐츠가 어떤 역할을 하는 지를 깊게 고민하고 알맞는 태그를 사용해야한다. 가장 중요한 제목은 h1 , 글자라고 모두 p 태그를 쓰는 것이 아닌, ‘단락’의 의미가 강하다면 p 를 사용하고, div 는 큰 의미 없이 레이아웃을 잡을 때, 구조를 나눠주고 싶을 때 사용한다. 위 내용들을 배웠으니 이제 레이아웃을 짤 때, 다양한 요소들을 배치할 때 많이 고민하고 선택하는 연습을 해야겠다.
