HTML 의미론

JAMEe_·2024년 11월 3일

HTML

목록 보기

4/4

div 와 span

<div> 와 <span> 는 요소에 아무런 의미가 없음
사이트에 <div> 와 <span> 이 많다는 것은 적절하게 작성하고 있지 않다는 것
다른 적절한 HTML 요소를 사용할 수 없을 때 마지막으로 선택하는 태그임

<header>
도입부, 헤딩, 헤딩 그룹, 목차, 검색, 로고, 글로벌 네비게이션 바
<footer>
저자, 저작권, 연락처, 관련 문서
<header> 와 <footer> 는 Sectioning Root(body) 안에 또는 Sectioning 콘텐츠(article, aside, nav, section) 감쌀 때 사용

Sectioning 콘텐츠

<section>
제목이 있는 주제별 콘텐츠 그룹
한 페이지에 카드 형식의 콘텐츠들이 나뉘어져 있을 때
각각 section 으로 선언
<article>
섹션 요소 중 독립적으로 배포 가능한 완결형 콘텐츠
뉴스 기사, 블로그 본문, 사용자 댓글 등
<header>, <footer> 요소를 내부에 사용하는 것은 선택사항

<nav>
현재 사이트 또는 일부를 링크하고 있는 주요 탐색 세션

<aside>
페이지의 주된 내용과 관련이 약해 구분할 필요가 있는 섹션
광고 배너 등

※ 모든 Sectioning 콘텐츠는 Heading ( h1 ~ h6 ) 콘텐츠를 포함하는 것을 강력하게 권장

main

<main>
문제의 핵심 주제 또는 애플리케이션의 핵심 기능과 직접 관련 있는 콘텐츠 영역을 의미
페이지마다 반복되지 않는 내용을 포함해야한다
하나의 페이지 안에서 하나의 <main> 요소만 표시할 수 있고,
<header> , <footer> , Sectioning 콘텐츠의 자식이 될 수 없다
<body> , <div> 요소를 제외한 다른 요소의 자손이 될 수 없다

dialog

<dialog>
사용자와 상호작용하는 응용프로그램( 대화상자 )를 의미
팝업 등
<dialog> 가 열릴 때 키보드 초점이 <dialog> 안 쪽에 항상 고정
또한, 키보드 사용자가 Tab 키만을 시용해서 <dialog> 안 쪽에 있는 이동 가능한 컨트롤들을 탐색할 수 있어야 함

figure

<figure>
문서의 주된 흐름을 위해 참조하는 독립적인 완결형 요소
이미지, 도표, 코드 등의 내용물과 설명을 포함

<figure>
  <img/>
  <figcaption>설명</figcaption>
</figure>

mark

<mark>
독자의 주의를 끌기 위한 하이라이트
노란색 형관펜을 칠한 것 처럼 강조

address

ins 와 del

<ins>
추가한 내용
<del>
삭제한 내용
주로 쇼핑몰에서 기존 가격에 <del>로 줄 긋고 할인된 최종 가격에 <ins>

JAMEe_

안녕하세요

이전 포스트