[Web] 웹 표준 & Semantic HTML

유아현·2022년 12월 30일
0

Web

목록 보기
4/11
post-thumbnail

❤️‍🔥 웹 표준

  • W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙
  • 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법

💖 웹 표준의 장점

  1. 유지 보수의 용이성

웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았다. 그러다보니 어느 한 부분을 수정하려면 전부 뜯어고쳐야 할 때도 있었다. 하지만 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다.

  1. 웹 호환성 확보

웹 사이트가 특정 운영체제나 브라우저에 종속적이라면 그 외 환경에서는 정상적으로 사용이 불가능한 문제점이 발생한다. 하지만 웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있다.

  1. 검색 효율성 증대

웹 표준에 맞춰 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다. 적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루고 있기 때문이다. 홍보를 위한 비용을 들이지 않아도 검색의 효율성을 높일 수 있게 되는 것이다.

  1. 웹 접근성 향상

브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹에 접근할 수 있는 환경은 매우 다양하다. 또한 웹을 사용하는 사람들도 다양하다. 이 모든 환경과 사용자에 맞춰서 웹 페이지를 개발하는 일은 쉽지 않다. 하지만 웹 표준에 맞춰 개발하는 것 만으로도 이러한 문제를 해결할 수 있다.


❤️‍🔥 Semantic HTML

  • 웹 표준에서는 HTML을 시맨틱(semantic)하게 작성하는 것의 중요성을 강조

semantic : 의미의, 의미가 있는 이라는 뜻의 영단어
HTML : 화면의 구조를 만드는 마크업 언어

💖 HTML을 사용하는 두 가지 방식

🔎 <div><span> 으로 화면 구성하기

  • HTML에는 많은 종류의 요소가 있다. 하지만 어떤 요소를 가지고 있는지 전부 알지 못해도, <div><span> 두 가지 요소만 알아도 충분히 아래와 같이 화면 구조를 만들 수 있다.

  • 위 그림의 HTML 구조만 보고 각 요소들이 어떤 역할을 하는지 알 수 있을까? 일반적으로 추측하자면 가장 상단은 헤더, 좌측은 네비게이션 바를 할 가능성이 높지만 확신할 수는 없다. 어떤 구조로 나누어졌는지는 알 수 있지만, 어떤 내용이 들어갈지는 명지되지 않았기 때문이다.

🔎 시맨틱 요소로 화면 구성하기

  • 위 그림은 시맨틱 요소를 사용한 화면 구조이다. <div><span> 요소로 화면을 구성했을 때와 비교하면 각 요소의 이름을 보고 화면에서 어떤 역할을 하게 될지, 어떤 내용을 담을지 보다 더 명확하게 알 수 있다. 요소의 이름에 맞게 화면을 구성하면 <header> 는 헤더의 역할을 하고 <nav> 는 네비게이션 바 역할을 하게 될 것이다. 이처럼 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실한 의미를 가지고 있는 요소를 시맨틱 요소 라고 한다. 추가로 시맨틱 요소를 적절하게 사용해 구성한 HTML을 Semantic HTML 이라고 한다.

🤔 Semantic HTML의 필요성?

  1. 개발자 간 소통
    여러 명의 개발자가 웹 페이지를 개발하면서 <div><span> 로만 HTML 코드를 작성한다고 가정해 보자. 그렇다면 요소의 이름을 보고서는 각 요소가 어떤 기능을 하는지, 어떤 내용을 담는지 알 수 없기 때문에 주석을 작성해서 설명하거나 idclass 를 사용해 일일히 표기해야 할 것이다 또한 idclass 는 이름을 정할 때 어떤 식으로 지을 것인지 협의해서 정해야하며, 다른 개발자들에게 어떤 의미를 가지고 있는지 설명하는 시간도 추가적으로 필요하게 될 것이다. 이런 귀찮은 과정을 시맨틱한 요소를 사용하기만 해도 줄일 수 있으며, 적어도 각 요소의 기능을 정의하느라 쏟아야 하는 시간은 들지 않을 것이다.

  2. 검색 효율성
    검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다. 검색 엔진은 <div><span>만 사용한 문서를 모든 요소가 비슷한 중요도의 내용을 담고 있다고 판단하지만 시맨틱한 요소를 사용한 문서에서 더 중요한 내용의 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하게 된다. 웹 페이지를 검색 엔진에 더 자주 뜨게 만들고 싶을 때, 광고비 등의 추가 지출을 하지 않고 시맨틱 HTML을 잘 짜는 것만으로도 어느 정도 효과를 볼 수 있다.

  3. 웹 접근성
    나이, 성별, 장애 여부, 사용 환경을 떠나 항상 동일한 수준의 정보를 제공해야 함을 의미한다. 시각 장애인의 경우, 웹 페이지에 접근할 때 음성으로 화면을 스크린리더를 이용하게 된다. 이때, HTML이 시맨틱 요소로 구성돼 있다면 화면의 구조에 대한 정보까지 추가로 전달해 줄 수 있어 콘텐츠 전달이 보다 정확해진다. 시맨틱 요소만 잘 사용해도 웹 접근성을 향상시킬 수 있다는 것이다.

✨ Semantic 요소의 종류

요소 종류설명
<header>페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소
<nav>메뉴, 목차 등에 사용되는 요소
<aside>문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소
<main>이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소
<article>게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소, 각각의 <article> 을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용
<section>문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용, 제목(<hgroup>)을 포함하는 경우가 많음
<hgroup>제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>
<footer>페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소

❤️‍🔥 예제로 이해하기 | Semantic HTML

🔎 <header>

  • 페이지의 최상단 위치
  • 페이지의 최상단의 경우, 사이트 전체에서 사용할 수 있는 내용을 담는다 ex) 로고, 사이트 이름, 사이트를 구성하는 메인 페이지, 다크모드 & 화이트모드, 검색 폼 등의 콘텐츠들
  • <article> , <main> 등 다른 요소의 머릿말 역할로도 사용할 수 있음

🔎 <nav>

  • 네비게이션 바의 역할, 링크를 담는다.
  • 해당 페이지에는 표시된 위치 외에 <nav> 요소가 2개가 더 있다. <nav> 요소가 페이지 이동을 위한 링크를 담고 있다는 것을 알면 금방 찾을 수 있을 것이다!

🔎 <aside>

  • 메인 콘텐츠와는 관련이 있긴 하지만, 직접적으로 연관은 없는 내용이 들어가는 요소
  • 우측에 있는 제목별 북마크, 페이지 하단에 있는 콘텐츠 오류 제도 등이 들어가 있다.

🔎 <main>

  • 페이지의 메인 콘텐츠가 들어가는 요소
  • 해당 페이지의 주제인 Semantics와 관련된 내용이 들어있다.

🔎 <article>

  • 게시글, 뉴스 기사처럼 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소
  • 재사용을 하는 부분인 만큼, 각각의 <article> 을 식별할 수 있는 요소가 필요(hgroup 을 사용하는 경우가 많다.)

🔎 <section>

  • 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용
  • 적합한 의미의 요소가 없을 때 사용하므로, 의미를 부여하기 위한 요소를 포함하는 것이 좋다(hgroup 을 포함하는 경우가 많다.)

🔎 <hgroup>

  • 제목을 표시하기 위해 사용하는 요소
  • <h1> 부터 <h6> 까지 있으며, 숫자가 클수록 글자의 크기는 작아진다.
  • 해당 페이지에서는 <article> 요소의 제목으로는 <h1> , <section> 요소의 제목으로는 <h2> 를 사용하고 있다.
  • <hgroup> 요소의 숫자만 봐도 <article> 요소가 <section> 요소를 포함하는 관계임을 파악

  • 페이지 요소의 최하단에 위치하는 꼬릿말 역할을 하는 요소
  • 사이트 제공자, 저작권, 정책, 사이트맵 등의 내용을 포함

0개의 댓글