UX/UI Article
What Are HTML5 Semantic Elements?
HTML5 의미 요소란 무엇인가요?
HTML5 semantic elements are specific HTML tags that define the meaning and structure of content on a web page. : :
HTML5 시맨틱 요소는 웹 페이지 콘텐츠의 의미와 구조를 정의하는 특정 HTML 태그입니다. 시맨틱 요소는 단순히 시각적 표현을 넘어 콘텐츠에 추가적인 의미를 부여하고, 검색 엔진, 보조 기술 및 기타 웹 애플리케이션이 페이지를 더 잘 이해하고 처리할 수 있도록 도와줍니다.
요약 :)
HTML5 시맨틱 요소는 웹 페이지의 구조와 의미를 명확히 표현하기 위해 도입된 태그들로, 콘텐츠에 의미를 부여해 검색 엔진, 보조 기술, 웹 애플리케이션이 페이지를 더 잘 이해하도록 돕습니다. 대표적인 시맨틱 태그로는 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 등이 있으며 각각 제목 영역, 탐색 링크, 본문, 독립 콘텐츠, 주제별 구획, 부가 정보, 페이지 하단 정보를 나타냅니다.
이 외에도 <figure>와 <figcaption>은 이미지나 다이어그램과 같은 콘텐츠와 그 설명을 함께 제공하는 데 사용됩니다. 이러한 시맨틱 요소들은 단순한 시각적 레이아웃을 넘어, 웹 접근성과 유지보수, SEO(검색엔진 최적화)에 중요한 역할을 하며, HTML 코드의 명확성과 재사용성을 높이는 데 기여합니다.
이 외에도 <figure>와 <figcaption>은 이미지나 다이어그램과 같은 콘텐츠와 그 설명을 함께 제공하는 데 사용됩니다. 이러한 시맨틱 요소들은 단순한 시각적 레이아웃을 넘어, 웹 접근성과 유지보수, SEO(검색엔진 최적화)에 중요한 역할을 하며, HTML 코드의 명확성과 재사용성을 높이는 데 기여합니다.
더보기→
출처.
Arsalan. (n.d). Makemychance - Get Your Chance. What Are HTML5 Semantic Elements?. 2025.11.12. https://makemychance.com/what-are-html5-semantic-elements/