_(1).jpeg&blockId=0e552736-74f0-4f5a-89e1-328d4931ca7c)
시맨틱 웹과 HTML 요소 정리
1. 시맨틱 웹이란 무엇인가?
시맨틱 웹(Semantic Web)은 HTML 문서 내 요소들이 단순히 "어떻게 보이는가"가 아니라 "어떤 의미를 가지는가"를 기계와 사람이 모두 이해할 수 있도록 구조화된 웹을 의미한다. 즉, 각 요소가 "무엇을 위한 것인지" 명확하게 구분되고 정의되어 있는 웹 문서 구조다.
HTML5에서 <div>나 <span> 같은 비시멘틱한 태그 대신 <header>, <article>, <nav> 등 목적이 명확한 시맨틱 태그가 도입된 것이 대표적인 예다.
2. 왜 시맨틱 웹이 중요한가?
접근성(Accessibility)
•
스크린 리더는 문서의 시맨틱 구조를 기반으로 내용을 사용자에게 전달한다.
•
예를 들어, <nav>는 탐색 영역임을, <main>은 주요 콘텐츠임을 알려주는 역할을 하여 시각장애 사용자도 콘텐츠 구조를 이해할 수 있다.
검색 최적화(SEO)
•
검색 엔진 크롤러는 시맨틱 구조를 분석하여 페이지의 주제를 이해하고, 검색 결과에 더 적절하게 노출시킨다.
유지보수 및 협업
•
의미 있는 태그를 사용하면 협업 중 코드 가독성이 향상되며, 스타일링이나 리팩토링 시 목적에 맞는 선택이 쉬워진다.
브라우저 기본 기능 지원
•
시맨틱 태그를 사용하면 브라우저가 기본적인 동작을 자동으로 제공하는 경우가 많다.
◦
예: <details>와 <summary>는 클릭 시 자동으로 열리고 닫히는 토글 UI를 제공한다.
◦
예: <dialog>는 show() 메서드를 통해 모달 다이얼로그를 쉽게 만들 수 있고, 브라우저에서 ESC 키나 배경 클릭으로 자동 닫힘을 지원한다.
◦
예: <form> 안의 <input type="submit">은 기본적으로 Enter 키 입력 시 제출 동작을 제공한다.
3. 목차별 HTML 요소 정리
메타데이터 (문서 정보)
•
<title>, <meta>, <base>, <link>, <style>: 문서의 설정이나 외부 리소스, 스타일 정의에 사용됨
link 태그 자세히 보기
•
외부 CSS나 아이콘, RSS 피드 등을 연결할 때 사용되는 매우 중요한 태그
•
media 속성을 활용하면 특정 뷰포트 조건에서만 CSS를 로드할 수 있어 반응형 디자인에 유용함:
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
HTML
복사
•
crossorigin 속성을 anonymous 또는 use-credentials로 설정하면 CORS 환경에서의 안전한 리소스 요청이 가능함. 특히 이미지 또는 폰트가 canvas에 영향을 줄 경우 이 설정이 중요함.
◦
예: 외부 출처 이미지를 <img> 또는 <svg>로 불러온 뒤 canvas에 그리면, CORS 설정이 없을 경우 해당 canvas는 오염(tainted) 상태가 되어 getImageData(), toDataURL() 등을 사용할 수 없음
◦
이를 막기 위해 crossorigin 속성과 함께 서버 측 CORS 헤더도 세팅해야 함
섹션 루트 (Sectioning Root)
•
<body>, <blockquote>, <details>, <dialog>, <fieldset>, <figure> 등
콘텐츠 섹션 (Sectioning Content)
•
<header>, <nav>, <section>, <article>, <aside>, <footer>: 문서의 구조적 구획을 정의함
텍스트 콘텐츠 (Text Content)
•
<h1>~<h6>, <p>, <pre>, <blockquote>, <hr> 등: 기본적인 문단 및 제목 구성
인라인 텍스트 시멘틱 (Inline Text Semantics)
•
<a>, <strong>, <em>, <abbr>, <code>, <mark>, <small>, <span>, <sub>, <sup> 등
이미지 & 멀티미디어
•
<img>, <picture>, <figure>, <figcaption>
•
<audio>, <video>: controls 속성을 가진 경우 대화형 콘텐츠로도 포함됨
내장 콘텐츠 (Embedded Content)
•
<iframe>, <embed>, <object>, <canvas>, <svg>, <math>: 외부 콘텐츠 또는 다른 네임스페이스 포함
SVG와 MathML
•
<svg>: 벡터 그래픽을 정의하며, 새로운 좌표계와 뷰포트를 생성함. HTML 문서 안에 직접 삽입하거나 외부 SVG를 불러올 수 있음.
◦
예: 아이콘, 데이터 시각화, 로고 등 다양한 용도
•
<math>: 수학 표현식을 기술하기 위한 MathML의 루트 요소
◦
모든 MathML 구조는 <math>로 시작하며, 중첩된 <math>는 허용되지 않음
◦
수학 관련 기술 문서나 과학 논문에서 자주 사용됨
스크립트
•
<script>: JavaScript 포함
•
<noscript>: JavaScript가 꺼져있을 때 사용자에게 대체 콘텐츠를 제공
◦
예: JS로 콘텐츠 로딩하는 SPA에서, JS가 꺼진 사용자를 위해 fallback 텍스트를 보여줄 수 있음
•
<template>: HTML 구조를 미리 정의해두고, JavaScript로 나중에 복제해서 DOM에 삽입할 때 사용
◦
웹 컴포넌트 구현 시 필수적인 요소
수정사항 표시
•
<ins>, <del>: 추가/삭제된 내용을 명시적으로 표현. 투명 콘텐츠 모델을 가짐
표 콘텐츠 (Table Content)
•
<table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td> 등
양식 (Forms)
•
<form>, <input>, <textarea>, <button>, <select>, <label>, <fieldset>, <legend> 등
대화형 요소 (Interactive Elements)
•
<a>, <button>, <details>, <summary>, <input>(type이 hidden 제외), <label>, <select>, <textarea>
•
<audio>, <video>는 controls 속성 포함 시 대화형 콘텐츠
웹 컴포넌트
•
<slot>: Shadow DOM 내에서 콘텐츠 삽입 위치를 지정하는 placeholder 역할을 함. 부모 컴포넌트로부터 전달된 콘텐츠가 삽입됨
•
<template>: 실제 렌더링되지 않는 구조 보관소. 클라이언트 렌더링 또는 반복 UI 템플릿 등 다양한 상황에서 활용됨
정리하자면, 시맨틱 HTML을 잘 활용하면 접근성, SEO, 유지보수 모두 좋아진다. 게다가 브라우저가 제공하는 기본 기능을 활용할 수 있어 개발 생산성과 사용자 경험까지 향상된다. 위 구조를 이해하고 적절한 HTML 요소를 사용하는 것이 좋은 웹을 만드는 첫걸음이다.
