Semantic태그

Semantic 태그 (의미론적 태그)

Semantic 태그의 이점

검색엔진 최적화
웹 접근성 향상
가독성 향상
레이아웃 구성 시 유용하게 사용됨

HTML Semantic Elements

<header> : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치
<nav>: 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현
<aside>: 페이지 전체 내용과는 어느 정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있음
<main>: 문서의 body요소의 주 콘텐츠를 정의할 때 사용
<section>: 문서나 응용프로그램의 일반적인 섹션을 표현
<articles>: 여러가지 아이템들을 묶어 재사용 가능하게 그룹화
<footer>: 주로 저작권 정보나 서비스 제공자 정보들을 나타내면 사이트 하단에 위치
<details>: 추가적인 정보를 나타내거나 사용자가 요청하는 정보를 나타냄
<summary>: 부모요소인 details 요소의 내용에 대한 요약이나 캡션 등을 나타냄
<figcaption>: 부모요소인 figure 요소의 내용들에 대한 캡션, 혹은 제목을 나타냄
<figure>: 일러스트, 다이어그램, 사진, 코드 등에 주석을 다는 용도로 사용
<mark>: 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목적으로 마킹되거나 하이라이트 된 텍스트를 표현
<time>: 24시간에서의 시간 혹은 그레고리력에서의 정밀한 날짜를 나타냄

https://developer.mozilla.org/ko/docs/Glossary/Semantics

Semantics - 용어 사전 | MDN

프로그래밍에서,시맨틱은 코드 조각의 의미를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼

developer.mozilla.org

<-- semantic 적용 X -->
<body>
    <div class="header">Header 영역</div>
    <div class="nav">
      <ul>
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
      </ul>
    </div>
    <div class="main">Content 영역</div>
    <div class="footer">Footer 영역</div>
</body>

<-- semantic 적용 O -->
<body>
    <header>Header 영역</header>
    <nav>
      <ul>
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
      </ul>
    </nav>
    <main>Content 영역</main>
    <footer>Footer 영역</footer>
  </body>

'프론트엔드 > HTML' 카테고리의 다른 글

이미지 & 멀티미디어 태그 (0)	2022.11.18
Block 레벨 요소와 Inline 레벨 요소 (0)	2022.11.18
Table태그 (0)	2022.11.18
목록태그 (0)	2022.11.18
Font태그 (0)	2022.11.18

차곡차곡🐿️

Semantic태그

Semantic 태그 (의미론적 태그)

Semantic 태그의 이점

HTML Semantic Elements

'프론트엔드 > HTML' 카테고리의 다른 글

티스토리툴바

Semantic태그

Semantic 태그 (의미론적 태그)

Semantic 태그의 이점

HTML Semantic Elements

'프론트엔드 > HTML' 카테고리의 다른 글

관련글

티스토리툴바