jonbeo 님의 블로그

HTML5 시맨틱 태그 정리 💡 section, article, aside, nav, header, footer 차이점과 예제

HTML5부터 도입된 시맨틱(Semantic) 태그는 단순히 화면을 구성하는 것뿐 아니라,의미 있는 구조를 가진 웹 문서를 만들기 위해 도입되었습니다.이러한 태그를 활용하면 검색 엔진 최적화(SEO), 웹 접근성, 유지보수성까지 좋아집니다.이번 포스팅에서는 HTML5의 주요 시맨틱 태그와 그 사용 예시를 자세히 살펴보겠습니다! ✅🧠 1. 시맨틱 태그란?Semantic = 의미 있는구조를 명확히 하여 사람이 보기에도, 기계(브라우저, 크롤러, 스크린리더)도 이해하기 좋게 만드는 태그입니다.🏗️ 2. 주요 시맨틱 태그 설명 태그 역할 사용 위치 문서 또는 섹션의 헤더페이지 최상단, 각 섹션 내네비게이션 메뉴전체 레이아웃, 사이드바문서의 주요 콘텐츠페이지 1개당 1개만독립적인 구역컨텐츠 그룹핑독립적으로..

안녕하세요 😊HTML5에서는 문서 구조를 더 명확히 하기 위해 의미론적(Semantic) 태그들이 있습니다.그중에서도 과 은 초보자들이 헷갈리기 쉬운 태그인데요,이번 글에서 차이점과 올바른 활용 방법을 쉽게 정리해드리겠습니다.📍 1. 태그란?문서의 주제별 구역을 나누는 태그제목(~)과 함께 쓰이는 경우가 많음같은 주제의 콘텐츠를 묶어 구조적으로 표현할 때 사용예시 회사 소개 우리 회사는 2020년에 설립되었습니다... 📌 포인트주제별 덩어리 구분여러 이 모여 문서를 구성📍 2. 태그란?독립적으로 배포하거나 재사용 가능한 콘텐츠를 나타냄기사, 블로그 글, 포럼 글, 댓글, 제품 카드 등에 사용예시 HTML5 태그 가이드 이 글에서는 HTML5 구조 태그에 대해 설명합니다... 📌 포인트..