[부스트코스 강의] 3. (2) 시멘틱 마크업

HTML & CSS/html & css 입문

서영22 2023. 11. 26. 15:45

컴퓨터(브라우저)가 잘 이해할 수 있는 코드

- 의미에 맞는 요소 사용

- 문서의 구조화

- 인간과 기계가 모두 이해할 수 있는 것이 목표

<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

This page lists all the HTML elements, which are created using tags.

developer.mozilla.org

서엉2

서엉2