시멘틱 마크업
컴퓨터(브라우저)가 잘 이해할 수 있는 코드
- 의미에 맞는 요소 사용
- 문서의 구조화
- 인간과 기계가 모두 이해할 수 있는 것이 목표
<b> : 단순히 텍스트 굵게 vs <strong> : 중요하다는 의미에 맞춰 굵은 스타일로
적절한 의미 에 맞춰 사용하는 것 = "시멘틱 마크업"
* 새로 생긴 Sematic 요소
<article> : 사이트 내 독립적 구분 / 게시판, 블로그 본문, 메거진, 뉴스기사 등
<aside> : 문서 주요 내용과 간접적으로 연관된 부분 표현 / 사이드바, 콜아웃 박스 등
<figure> : 독립적인 콘텐츠 표현 / 이미지, 삽화, 도표, 코드 등
<figcaption> : figure 콘텐츠에 대한 설명
<footer> : 작성자, 저작권 정보, 관련 문서 내용 등
<header> : 제목, 로고, 검색, 작성자 이름 등
<hr> : 단락 요소 간의 주제별 구분
<main> : <body>의 주요 내용
<mark> : 중요 표시, 하이라이트 부분 처리
<nav> : 현재 페이지 내, 다른 페이지 이동 링크 표현 / 메뉴, 목차, 색인 등
<p> : paragraph 단락 구분
<section> : 사이트내 독립적 구분 / 더 적합한 의미를 가진 요소가 없을 때 사용 / 보통 헤딩태그 포함
<time> : 시간의 특정 지점 또는 구간, 24시간 표기법, 검색 결과, 알림 기능 등
참고자료
HTML elements reference - HTML: HyperText Markup Language | MDN (mozilla.org)
'HTML & CSS > html & css 입문' 카테고리의 다른 글
[부스트코스 강의] 4. (1) CSS ( 문법 / 구성 요소 / 문서 연결법 ) (0) | 2023.11.26 |
---|---|
[부스트코스 강의] 3. (3) 블록 레벨 / 인라인 레벨 (0) | 2023.11.26 |
[부스트코스 강의] 3. (1) 콘텐츠 모델 (0) | 2023.11.26 |
[부스트코스 강의] 2. (3) HTML 태그 ( 폼 요소 ) (0) | 2023.11.26 |
[부스트코스 강의] 2. (2) HTML 태그 ( 테이블 요소 ) (0) | 2023.11.26 |