오늘은 HTML을 Sementic한 Tag로 마크업 하는 방법을 배웠다!
시맨틱 태그란(Sementic Tag)?
Sementic Tag는 HTML5 기술의 가장 큰 변화 중 하나이다.
여기서 Sementic은 "의미있는, 의미론적인"이라는 뜻으로,
Sementic Tag는 의미가 있는, 내용을 명확히 담고있는 Tag라는 뜻이다.
예를 들어 보자면,
의미가 있는 태그는,
<header>,<nav>,<section>,<article>,<footer>...태그만 보고 이 안에 무슨 내용이 들어가 있는지 유추해 볼 수 있다.
반면 의미가 없는 태그는,
<div>,<span>...이처럼 내용의 의미를 알 수 없다.
헷갈리는 tag들!!
- figure와 figcaption
figure태그는, 독립적인 콘텐츠를 표현한다. 이는 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 의미합니다.
이 figure는 figcaption이랑 붙어다니는데,
figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치시킵니다.
figure 태그는 보통 이미지나 삽화 도표등을 감싸는데에 사용하는데, sementic한 태그를 사용하기 위해 img를 감쌀때에는 필수적으로 div가 아닌 figure 태그를 사용해야 하는지가 궁금했다.
그래서 이에대한 답은,
💡figure 로 감싸주는 경우는 figcaption으로 이미지와 설명을 연결해야하는 경우입니다! 그 밖에는 꼭 figure 로 감쌀 필요는 없다.
- section과 article
section태그는, HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다, 컨텐츠를 의미적으로 그룹핑하기 위해 사용함.
article태그는, 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. (독립적인 아이템!!)
💡 article과 section 요소는 heading 요소와 함께 사용하는 것을 권장(높이 없이 비워두기도 함)
- b와 string
strong은 중요한 내용을 강조할 때 사용
b는 단순히 굵게 표시할 때 사용
💡이 두개의 차이점은 '화면 낭독기'에서 차이를 보인다.
strong태그를 사용하면 화면낭독기는 해당 부분이 강조되었다고 알려주나, b태그는 알려주지 않는다. 그래서 중요한 내용인지 아닌지에 따라 사용하면 된다!
이 외에도 정말 많은 태그들이 있지만, 우선적으로 내가 제일 헷갈렸던 대표적인 태그들만 정리해 보았다!
시맨틱 태그 사용의 이유
- SEO(Search Engine Optimization)
SEO는 검색엔진 최적화를 뜻한다. 검색엔진이 웹페이지의 자료를 수집하거나 순위를 방식에 맞게 웹페이지를 구성하여, 검색 결과의 상위에 나올 수 있게하는 행위를 말한다.
SEO를 위해서는 검색어를 페이지에 적절하게 배치해야 한다. 검색엔진은 결과를 보여줄 때, HTML의 태그들을 분석한다. 이 때, Sementic한 문서는 검색엔진이 유의미한 결과를 낳을 수 있도록 한다.(❗ 패이지 주제 파악을 위해 검색엔진이 h1태그를 확인하기 때문에 페이지에 하나씩 필요함)- 웹 접근성
웹 접근성이란, 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것입니다. 그래서 시멘틱 태그를 사용하면, 리더기가 태그를 분석해서 장애인이나 고령자분들에게 내용을 전달해 줄 수 있음.- 유지보수와 코드의 가독성
시멘틱 태그를 사용하면, 내용이 명확하기에 코드를 읽고 수정하는데에 좋음.
신세계를 보았다!!!
HTML을 쉽고 단순하게 봤던 나를 반성한다...
그저 div와 span만 있으면 무엇이든 만들 수 있지...하고 생각했던 때가 있었는데,
sementic태그의 사용이유에 대해 알게 되고, 많은 요소들이 있다는걸 알게 된 후 전체적인 구조를 짤 때 더 신중해졌고 어떤 내용이 들어오는지에 대해 분석하는 시간이 길어졌다.
그만큼 마크업 하는데에 시간이 더 많이 걸렸지만 결과적으로, div로만 점철되었던 코드들을 봤을 때 보다는 실제로 내가 짠 코드를 읽는데에 더 수월했고 이걸 느끼고 나니, 왜 정리된 코드 sementic한 요소를 사용해야 되는지에 대해 몸소 느끼게 되었다. 또한 내가 짠 코드 나만 잘 보면 된다 생각 했던 내가 부끄럽게 지금은 나만 보지만 내가 개발자로서 실제 서비스를 개발 하고 코드를 짤 때는 유저와 사용자를 위한 코드를 짜야한다는 사실을 깨닫게 되었고, 그러면서 웹 접근성에 대해 더 많은 관심이 생겼다.
🔍우선은 Cheat Sheet를 보면서 tag를 익히고, 여러 레이아웃을 따라하면서 직접 tag들을 사용해보는 방식으로 공부를 해봐야겠다!!
💁 HTML Cheat Sheet
