왜 html을 시맨틱하게 작성해야 하나요?
-
Semantic : 의미의, 의미론적인
- 의미에 맞는 태그를 사용해 문서를 작성하는 것
- 예를 들어, 특별한 의미가 없는
<div>태그 대신<section>,<article>,<footer>,<nav>,<aside>처럼 의미 있는 태그를 상황에 따라 사용하는 것
-
시맨틱하게 HTML을 작성하면 요소에 쉽게 의미를 부여할 수 있습니다.
-
각 요소가 자체적인 의미를 가지기 때문에, 가독성이 높아지고 유지보수가 쉬워집니다.
-
시맨틱하게 작성된 HTML 구조는 검색 엔진이 HTML 계층 구조에 따라 키워드의 중요도를 더 잘 파악할 수 있어, 크롤러에 더 구체화한 정보를 제공할 수 있습니다.
어떻게 해야 시맨틱하게 작성하는 건가요?
- 태그들의 만들어진 목적을 이해하고, 그것에 맞게 사용해야 합니다.
<h1> ~ <h6>
- 각 섹션의 제목을 나타냅니다.
- 섹션 단계는
<h1>이 가장 높고<h6>이 가장 낮습니다. - 페이지 당 하나의
<h1>만 사용하세요.
<header>
- 제목이나 대표 이미지가 들어가는 요소입니다.
<h1>, <h2>등의 요소나 로고 등을 포함합니다.
<body>의 하위로 작성되면 웹 페이지 전체의 헤더를 정의하는 영역이 됩니다.<article>, <section>등 Sectioning Content 의 하위로 사용되면 해당 영역의 헤더를 의미합니다.
<footer>
- 작성자나 관련 문서 링크, 라이센스 등의 데이터가 들어가는 요소입니다.
- 전체 문서 또는 Sectioning Content의 바닥글로 쓰입니다.
<main>
- 페이지당 한 번만 사용해서
<body>아래 작성합니다. - 다른 요소 내에 중첩되지 않아야 합니다.
<article>
- 요소 자체가 하나의 의미 있는 콘텐츠 블록 영역입니다.
- 이 요소만으로 단일 게시물을 나타낼 때 사용합니다.
- 이 요소의 내용은 독립적으로 배포하거나 재사용됩니다.
- 블로그 항목이나 게시물, 기사 위젯 등에 사용됩니다.
<section>
<article>과 유사하지만 페이지의 단일 부분을 그룹화하는 데 유용한 요소입니다.- 기사의 헤드라인을 모으거나 각 블로그의 피드 정보가 나타나는 영역으로 사용됩니다.
- 요소의 콘텐츠를 함께 묶는 것이 합리적일 때
<article>대신<section>을 사용하는 것이 좋습니다. - 다만
<section>은 일반 컨테이너 요소가 아니기 때문에 단순 스타일링을 위한 요소를 사용할 때는<div>를 사용하는 것을 권장합니다.
<aside>
- 기본 콘텐츠와는 직접 관련이 없지만 간접적으로 관련된 추가 정보를 포함하는 요소입니다.
<nav>요소나 광고, 인용처럼 분리된 콘텐츠를 나타낼 때 사용합니다.
<nav>
- 다른 페이지 또는 문서의 특정 영역(탐색 링크가 있는 섹션)으로 이동시키는 링크를 나타냅니다.
나의 과정들