웹표준과 시멘틱태그

웹표준 👩🏻‍💻

웹 표준은 웹에서 사용되는 기술과 규약으로 웹사이트를 일관되게 구현하고 상호 운용성을 확보하기 위해 따라야 하는 규칙이다.

웹은 다양한 운영체제(OS)와 브라우저가 존재하는데, 각각의 운영체제와 브라우저는 다양한 기술과 표준을 구현하고 있다. 이로 인해 웹 페이지가 특정 브라우저나 플랫폼에서만 정상적으로 동작하거나, 호환성 문제로 인해 웹 콘텐츠가 올바르게 표시되지 않는 크로스 브라우징 이슈가 발생할 수 있다.
이때 공통된 약속인 웹 표준을 준수한다면 웹 페이지는 모든 브라우저와 기기에서 일관된 방식으로 작동하기 때문에 웹 표준을 지키는 것은 웹 페이지의 보편성과 접근성 관점에서 매우 중요하다.

검색엔진 최적화와 HTML 🚀

HTML 사용의 궁극적 목적은 사용자에게 올바른 의미를 전하기 위해서이다. 그렇기 때문에 우리는 올바른 의미를 잘 전달하며 HTML을 적절히 이용해서 검색엔진에 더 잘 노출되도록 해야한다.
웹에 쓰여지는 모든 글이 그럴 것 이다. 정보전달을 위해 글을 실컷 썼지만 정보가 필요한 사람에게 글이 도달하지 못한다면 이보다 속상한 일이 없을꺼다. 그래서 검색엔진 도달율을 높이기 위해서는 HTML의 요소를 적절하게 사용하는게 매우 중요하다!

시멘틱 태그 🔥

시맨틱 태그는 HTML5에서 도입된 태그로 의미론적인 태그, 즉 태그에 의미를 부여하여 웹 문서의 구조와 의미를 명확하게 정의하는 역할을 한다. 시맨틱 태그를 사용하면 검색엔진이 웹 페이지의 내용을 더 잘 이해하고 색인화할 수 있으며, 웹 페이지의 접근성과 가독성을 향상시킬 수 있다. 사실 시맨틱 태그를 사용하면 검색엔진 뿐만 아니라 브라우저, 개발자 모두에게 컨텐츠의 의미를 명확히 설명할 수 있다.

예를 들어 보자

<span>1. 아주 중요한 제목입니다!</span>

<h1>2. 아주 중요한 제목입니다!</h1>

1번 span 태그는 아무런 의미를 가지지 않는다. 하지만 2번 h1 태그는 제목중 첫번째!라는 상당한 의미를 가진다. 그리고 검색엔진은 대체로 h1 엘리먼트의 컨텐츠를 중요한 제목으로 인식하고 색인할 가능성이 높다. 또한 다른 개발자의 시점에서도 코드의 의도를 명확하게 파악할 수 있어 가독성은 물론 유지보수가 쉬워지는 것이다.

자, 그럼 의미를 부여하지 않는 <span>, <div> 태그를 대체할 수 있는 시멘틱 태그에 대해 알아보자.

- div 태그를 대체할 수 있는 시멘틱 태그

스크린샷 2023-06-12 오후 8 36 22

<header>: 보통 도입부, 헤딩, 헤딩 그룹, 목차, 검색, 로고 정보를 마크업
<section>: 제목이 있는 주제별 콘텐츠 그룹 또는 응용 프로그램 영역
<article>: 섹션 요소 중 독립적으로 배포 가능한 완결형 콘텐츠. (ex.뉴스 기사, 블로그 본문, 사용자의 댓글 등)
<nav>: 문서의 목차나 메뉴
<aside>: 페이지의 주된 내용과 관련이 약해서 구분할 필요가 있는 섹션
<main>: 문서의 핵심 주제

- span 태그를 대체할 수 있는 시멘틱 태그

<strong>: 텍스트를 강조하여 의미적으로 중요하다는 것을 나타냄(볼드체)
<em>: 텍스트를 강조하여 의미적으로 중요하다는 것을 나타냄(이탤릭체)
<a>: 하이퍼링크를 정의하고 다른 문서나 위치로 이동하는 링크를 생성
<mark>: 검색 결과 목록에서 사용자가 입력한 키워드를 강조하는 용도

간단하게 웹표준과 시멘틱 태그에 대해 알아보았다. 사실 위의 개념들을 정리하며 지금껏 시멘틱 태그를 쓰지않았던 사실을 깨달으며 한번 아찔했다.😬 div 태그만 주구장창 나열했었는데 프로젝트에 쓰인 태그들을 한번씩 되돌아보며 수정하는 시간을 가져야겠다,,ㅠ 하지만 또 다행인건 이번에 개념들을 정리하면서 SEO나 시멘틱 태그의 개념 및 중요성을 이해했고 앞으로의 프로젝트에서 잘 적용할 수 있을 것이라는 기대감이 생겼다는 것이다! 오늘도 cs 적으로 많은 것을 배웠다 뿌듯!