728x90
반응형
웹 표준이란 W3C에서 권고하는 “웹에서 표준적으로 사용되는 기술이나 규칙”으로, 사용자가 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다.
웹 표준의 장점
- 유지 보수의 용이성
- 웹 표준으로 HTML, CSS, JavaScript 등의 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다.
- 웹 호환성 확보
- 웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나올 수 있도록 할 수 있다.
- 검색 효율성 증대
- 웹 표준에 맞게 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다. 적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루기 때문이다.
- 웹 접근성 향상
- 웹 표준에 맞게 웹 사이트를 제작함으로 인해서 브라우저의 종류, 운영체제의 종류, 기기의 종류 등에 관계 없이 모든 사용자가 웹 사이트에 접근할 수 있게 된다.
Semantic HTML
<div>와 <span>으로만 화면을 구성할 수 있지만 해당 HTML 구조만 보고 각 요소들이 어떤 역할을 하는지, 어떤 내용이 들어갈지 알 수가 없다. 따라서 시맨틱 요소로 화면 구성하여 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 알 수 있도록 한다.
시맨틱 HTML의 필요성
- 개발자간 소통
- 검색 효율성
- 웹 접근성
시맨틱 요소의 종류
| 요소 종류 | 설명 |
| <header> | 페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소 |
| <nav> | 메뉴, 목차 등에 사용되는 요소 |
| <aside> | 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소 |
| <main> | 이름 그대로 문서의 메인이 되는 주요 컨텐츠를 담는 요소 |
| <article> | 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소 |
| <section> | 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용 |
| <hgroup> | 제목을 표시할 때 사용하는 요소로, <h1>~<h6>요소 |
| <footer> | 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소 |
728x90
반응형