HTML 태그 정리 (시맨틱 태그, 중요한 태그모음)

웹 개발을 진행하다보면 다양한 HTML 태그를 만날 수 있다.

그 중에서도 시멘틱(Semantic Tags) 태그에 대해서 알아볼 필요가 있다.

 

글에도 '제목', '부제목', '본문' 내용이 나뉘어 있는 것처럼 HTML 태그에서도 각 사용목적에 따라 의미가 있는 HTML 태그를 종류별로 사용해야 한다는 것이다.

 

일반적으로 웹브라우저에서는 <h1> 태그로 감싸져 있는 것을 '제목'이라고 인식해서 별도로 표현해준다.

사용자 화면에 보았을 때는 단순히 글자크기가 크게만 보이겠지만, 검색이나 웹 페이지 유지관리의 용이성에 있어서는 적절한 시멘틱 태그를 사용하는 것이 좋다.

① SEO : 검색에 최적화 되기 위해서, 적절한 HTML 태그를 사용

② Accessibility : 웹 접근성이 좋아진다. (시각 장애인들이 키보드만으로 웹페이지의 다양한 버튼과 UI를 알아내기 용이)

③ Maintainability : 개발자들이 코드를 분석하기에 용이, 페이지 구성이 한눈에 들어온다.

 

웹 개발에 처음 입문한 사람의 경우 <div> 태그를 남발하여 웹 페이지를 구성하는 경우를 종종 볼 수 있습니다.

물론 <div> 태그로 웹 페이지를 개발할 수도 있습니다.

 

하지만, 장기간으로 보았을 때 이는 좋은 습관이 아닙니다.

수많은 div 태그 중에, 필요한 부분을 수정하기 위해서 코드를 재분석하는데 그만큼의 시간과 비용이 소모되기 때문입니다. 이는 웹 프로젝트가 커질수록 들어가는 시간/비용이 기하급수적으로 증가하게 됩니다.

그렇다면 어떻게 해야할까요?

웹 페이지의 HTML 시멘틱 태그를 필요한 목적과 의미에 맞게 구분지어 사용하는 것이 좋습니다.

대표적으로 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 이 있습니다.

<article> vs <section>의 차이는 무엇일까요?

<article>의 경우는, 블로그 포스트 1개 혹은 뉴스 기사 1개 단위를 나타내고자 할 때 사용합니다.

 특히, 독립적으로 사용되는 부분을 표현해야 할 경우 사용하는 것이 적합합니다.

 

<section>은 연관된 요소를 단위별로 묶어줄 때 사용합니다.

<i> vs <em> 의 차이는?

ex) <p> 나는 <em>오늘도</em> 즐거운 <i>코딩</i>을 한다. </p>

 

<i> 태그의 경우, 시각적으로만 이탤릭체 표현해준다.

<em> 태그는 이탤릭체 표현 + '강조'까지 표현해준다.

 

이와 유사하게 <b> vs <strong> 비교해본다.

 

<b> 태그는, 시각적으로만 굵게 표현해준다.

<strong> 태그는 굵게 + '강조'까지 표현해준다.

 

웹 페이지 내, 목록을 나타낼때 주로 사용하는 태그 종류가 있습니다.

<ol>, <ul>, <dl> 3가지는 종류별로 특징이 있습니다.

순서가 중요할 때는 → <ol>

순서가 필요없을 때는 → <ul>

목록별 정의, 설명이 필요할 때 → <dl>

 

웹페이지 화면 구성에서, 사용 용도로 가장 헷갈려하는 HTML 태그가 있습니다.

<button> vs <a> 태그입니다.

 

한가지로 정리할 수 있습니다.

링크 이동이 필요하면 → <a>

특정한 액션/효과가 필요 → <button>

 

다양한 시멘틱 태그가 궁금하시다면 아래 링크를 참고 해주세요.
https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

위 내용은 드림코딩 엘리에서 참고했습니다.