시멘틱 태그란?
단어를 해석하면 의미가 있는 태그라는 말인데
우리가 물을 마실 때 후라이팬에 물을 마시는 것이 아니라 컵에 물을 마시듯 모든 사물들이 각자의 의미가 있는 것 처럼 HTML태그에도 각자의 의미가 있다. 즉 HTML에서도 제목을 작성한다 가정했을 때 div나 span태그의 css를 적용하여 제목처럼 보이게 할 순 있으나 그저 후라이팬에 물을 받아 먹는 것과 같은 행동일 뿐이다. 이런 시멘틱 태그의 적절한 이용이 중요한 이유는 크게 3가지가 있다.
- SEO(검색최적화)를 위해
- 웹접근성의 최적화를 위해
웹페이지를 시각적인 것이 아니라 스크린 리더나 마우스 없이 키보드만 사용할 경우에도 문제 없이 잘 작동하기 위해- 가독성을 위해
남이 작성한 코드를 보더라도 적절한 시멘틱 태그는 가독성이 뛰어나다
이런 이유로 이제 div남발을 피해보고자 시멘틱 태그들과 자주 쓰지만 햇깔리는 태그들을 정리하려 한다.
<header>
header 요소는 소개 및 담색에 도움을 주는 콘텐츠를 나타낸다. 제목이나 로고, 검색, 사용자들을 위한 중요 메뉴 등이 주로 쓰인다.
<nav>
nav 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. header안에 여러 메뉴가 모여있다면 nav를 사용하는 것이 좋다. 자주 쓰이는 예제는 메뉴, 목차, 색인이다.
<main>
main 요소는 현재 페이지에 중요한 컨텐츠를 가지고 있는 부분을 작성 할 때 사용한다.
<aside>
main 안에 문서의 주요 내용과 간접적으로만 연관된 부분, 광고나 부가적인 요소를 주로 사용한다.
<article>
article은 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
<section>
section은 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
<footer>
footer 요소는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
🛠 자주 쓰는 태그 정리
<article> vs <section>
article : 블로그 포스트로 치면 포스트 하나, 신문으로 치면 신문기사 하나 같이 자체만으로 다른 페이지에 보여줬을때 전혀 문제가 없을, 독립적으로 사용가능한 정보를 담을 때 사용한다.
section : 이 article 안에 내용들 중에 서로 연관있는 내용들 끼리 묶어주고 싶다면 section을 사용한다. section은 꼭 article 안이 아니더라도 main안 어디서든 연관된 내용을 묶어 줄 때 이용하자.
<i> vs<em>
둘 다 기울임을 표현하는 태그인데 차이가 있다.
i
: 시각적으로만 이탤릭체 적용
em
: 시각적인 것만 아니라 강조까지 되는 이탤릭체
즉 스크린 리더 등을 이용하여 음성인식을 지원 받는다면 em태그로 작성된 코드는 강조되서 읽혀진다.
<b> vs <strong>
둘 다 굵기를 표현하는 태그인데 차이가 있다.
b
: 시각적으로만 볼드 적용
strong
: 시각적인 것만 아니라 강조까지 되는 볼드, 정~말 중요한 것들을 강조!
즉 스크린 리더 등을 이용하여 음성인식을 지원 받는다면 strong태그로 작성된 코드는 강조되서 읽혀진다.
<ul> vs <ol> vs <dl>
ul
: 순서가 없는 목록을 만들 때 작성
ol
: 순서가 중요한 목록을 만들 때 작성
dl
: 어떤 한 단어에 대해 설명이 엮어 있을 때 작성 dt:단어 dd:내용
단어의 정의와 설명 목록을 만들 때 작성
<img> vs background-imgage(css)
img
: 이미지가 페이지 내에서 하나의 중요한 요소로 자리잡고 있을 때,문서의 일부분일때 img를 사용
background-images
: 이미지가 내용이 아닌 스타일링 목적을 위해(배경 등) 사용될 때 사용
<button> vs <a>
둘 다 css를 적용하면 비슷하게 생겼지만 용도는 확실히 다르다.
button
: 사용자의 특정한 액션을 위해, 이 버튼을 클릭하여 어떤 행동을 발생시킬때 사용. 로그인이나 가입, 퀴즈 풀기 등
a
: 어딘가로 이동할때, Home으로 가기나 링크 등에 사용
참고: https://developer.mozilla.org/ko/docs/Web/HTML/Element
https://www.youtube.com/watch?v=T7h8O7dpJIg
