반응형
시맨틱 구조란 무엇인가?
시맨틱 구조는 의미를 전달하고 웹페이지의 구조를 정확하게 보여주는 방법입니다. 아래 그림은 Codecademy를 공부하면서 나온 사례인데요. 좌측이 Non-Semantic, 우측이 Semantic 구조입니다.
왼쪽, 오른쪽을 비교하니까 우측은 박스만 보더라도 웹페이지 구성이 어떻게 되는지 대략적으로 알 수 있네요!
시멘틱에 필요한 태그
위의 그림을 코드로 구성해본 다른 예시입니다. 모든 시맨틱 태그를 사용하지는 않았네요.
<!DOCTYPE html>
<html>
<head>
<title>Your Webpage Title</title>
</head>
<body>
<header>
<!-- Header content goes here -->
</header>
<nav>
<!-- Navigation links go here -->
</nav>
<main>
<section>
<!-- Additional sections of content go here -->
</section>
<article>
<!-- Main article content goes here -->
</article>
</main>
<aside>
<!-- Sidebar content or additional information goes here -->
</aside>
<footer>
<!-- Footer content goes here -->
</footer>
</body>
</html>
- <header> : 웹 페이지 상단에 있는 소개 콘텐츠를 묶습니다
- <nav> : 탐색 링크, 메뉴가 포함된 섹션입니다
- <main> : body 영역 중 메인 콘텐츠 영역입니다
- <footer> : body 영역 중 하단 정보영역(푸터)를 묶습니다
- <section> : main 영역을 다시 나누어 그룹화합니다
- <article> : section과 연관된 글 또는 뉴스 기사 등 독립적으로 존재하는 게시 컨텐츠를 묶습니다
- <aside> : 보조 정보를 표시하는 태그입니다. 예를 들어 참고문헌, 코멘트, 사이드바 등입니다
- <figure> : 이미지 영역을 표시하는 태그입니다<figurecaption> : <figure> 하위 태그입니다. 이미지를 설명하는 태그입니다
시맨틱 구조가 필요한 이유
- 접근성 : <header>, <main>과 같은 시맨틱 태그를 사용하면 스크린 리더가 콘텐츠를 더 잘 이해할 수 있습니다. 시각장애인을 위해 웹페이지를 읽어줄 때 구조를 잘 설명해줄 수 있습니다.
- SEO(검색엔진 최적화) : 검색 엔진이 웹 페이지를 파악하기 용이하여 검색 결과에 노출될 가능성이 높아집니다
- 가독성 : 코드를 짠 개발자, 다른 개발자들도 코드를 쉽게 이해할 수 있습니다.
- 브라우저 호환성 : 여러 브라우저에서 올바르게 출력될 수 있도록 도와줍니다.
반응형
'HTML' 카테고리의 다른 글
| embed 태그와 video 태그의 차이점 (0) | 2023.07.14 |
|---|---|
| HTML audio , 오디오 컨텐츠를 웹페이지 넣을 수 있는 태그 (0) | 2023.07.13 |
| HTML textarea, 여러 줄의 텍스트를 입력하는 폼 생성 태그 (0) | 2023.07.11 |
| HTML datalist, 드롭다운 메뉴를 만드는 또 다른 방법 (select와 차이점) (0) | 2023.07.10 |
| HTML 드롭다운 목록을 생성하는 태그 select, option (0) | 2023.07.09 |