📌시맨틱 태그(semantic Tag)
시맨틱은 '의미의'라는 뜻을 가지고 있고 태그는 HTML 요소며 문서를 구성하는 기본 단위이다.
즉, 시매틱 태그는 의미있는 HTML 요소라고 생각하면 된다.
시맨틱 태그는 HTML5에서 처음 나오게 되고 웹 사이트 구조를 구성하거나 박스 태그 등 다양한 의미있는 태그들이 약 100가지 정도가 나오게 되었다
- 웹사이트를 구성하는 시맨틱 태그
<header>,<nav>,<footer>,<section>등 - 웹사이트 외의 의미 있는 태그
<h1>,<time>,<figure>등
그렇다면 왜 시멘틱 태그를 사용할까❗
1. 검색엔진최적화(SEO)
시맨틱 태그를 사용하면 검색 엔진이 웹 페이지의 내용을 더 잘 이해하고 적절한 검색 결과로 표시할 수 있다. 이는 웹 페이지의 검색 엔진 순위를 향상시킬 수 있다.
2. 개선된 접근성
시맨틱 태그는 스크린 리더와 같은 보조 기술에게 웹 페이지의 구조와 내용을 더 명확하게 전달한다. 예를 들어, <header> <footer> <article> <section> 태그는 웹 페이지의 다양한 부분을 구분하여 사용자가 더 쉽게 내용을 탐색할 수 있게 한다.
3. 코드의 가독성과 유지 보수성 향상
시맨틱 태그는 웹 페이지의 구조를 명확하게 표현하기 때문에 다른 개발자들이나 나중에 코드를 수정해야 할 때 코드를 이해하고 유지 보수하기가 더 쉬워진다.
4.페이지 로딩 시간 최적화
올바르게 구조화된 시맨틱 마크업은 브라우저가 페이지를 더 효율적으로 렌더링하게 도와, 페이지 로딩 시간을 줄일 수 있다.
웹 표준
웹 표준은 W3C와 같은 기관에서 웹 페이지와 웹 애플리케이션을 만들고 , 해석하고 , 랜더링 하는데 사용되는 기술 및 규칙의 모음이다
왜 웹 표준이 나왔을까❓
웹 표준이 없는 시기에는 웹 브라우저마다 자체적인 방식으로 HTML을 해석하고 표시를했는데 문제점들이 많이 속출했다.
웹 표준이 없었을때의 문제점
1.크로스 브라우저 호환성 문제
양한 웹 브라우저가 HTML, CSS, JavaScript 등을 서로 다르게 해석하고 렌더링했다. 이로 인해 웹 개발자들은 같은 웹사이트를 여러 브라우저에서 제대로 작동하도록 만들기 위해 더 많은 일을 했다.
2.유지 보수의 어려움
비표준적인 코드와 해킹(hacks)을 사용해야 했던 웹사이트는 유지 보수가 어렵고 비용이 많이 들었다. 그리고 새로운 기능을 추가하거나 기존 기능을 변경하기가 복잡했다.
3.보안 취약점
일관된 표준이 없었기 때문에, 웹사이트가 보안 취약점을 가질 위험이 더 크다. 사용자 데이터 보호와 관련된 문제도 있었다.
4.개발의 비효율성
브라우저마다 다른 표준을 따르는 환경은 개발자들에게 추가적인 학습을 요구한다. 개발 하는 브라우저가 다르면 그 브라우저의 표준을 공부해야 했기 때문이다
웹 표준의 장점 ❗
앞서 웹 표준의 문제점을 살펴봤다 위에 예시보다 더 많은 문제가 있었지만 웹 표준이 나와야되는 이유는 저정도로도 설명이 가능하기에 생략하고 웹 표준이 생기고 난뒤에 장점들을 살펴보자.
웹 표준이 생기고 지켰을때의 장점
1.호환성 문제 해결
웹 표준은 모든 브라우저에서 일관된 방식으로 웹 페이지가 표시되도록 하는 것을 목표로 하여 호완성 측면에서의 문제를 해결한다.
2.웹 접근성 개선
장애가 있는 사용자를 포함하여 모든 사람이 웹을 사용할 수 있도록 만드는 것이 중요하다. 웹 표준은 웹 접근성 지침을 제공하여 모든 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 한다.
3.기술의 발전 촉진
표준화된 기술을 사용함으로써 개발자들은 새로운 기능을 보다 쉽게 구현하고 확장할 수 있다.
4.유지 보수와 개발의 효율성
표준에 따라 개발된 웹사이트는 더 쉽게 유지 보수할 수 있으며, 새로운 개발자가 프로젝트에 참여하기에도 편하다.
5.미래 지향적인 웹
웹 표준은 기술이 발전함에 따라 계속해서 업데이트되며, 이는 웹이 미래의 기술 변화에도 쉽게 적응 할 수 있다.
