[콘텐츠 모델/시멘틱 마크업/블록&인라인] 시멘틱 마크업
목차
1. 시멘틱 마크업이란?
2. 시멘틱 마크업
3. HTML5 시멘틱 요소
시멘틱 마크업이란?
시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다.
시멘틱은 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻한다.
시멘틱 마크업
그렇다면 어떻게 해야 브라우저가 잘 이해할 수 있도록 코드를 짤 수 있을까?
정해진 약속을 잘 지키면 된다.
마크업을 할 때에는 의미에 맞는 태그, 요소를 사용하고 문서를 표현할 때는 구조화를 잘 해주면 된다.
정해진 약속대로 코드를 작성하게 되면 기계뿐만 아니라 사람도 이해하기 쉬운 코드가 될 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>semantic</title>
</head>
<body>
<b>굵은</b> vs <strong>중요한</strong>
<br>
<i>기울어진</i> vs <em>강조하는</em>
<br>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<br>
<s>중간선이 있는</s> vs <del>삭제된</del>
</body>
</html>
위 코드를 브라우저 화면에서 보면 각각의 요소가 같은 모습으로 표현되지만 그 의미는 같지않다.
<b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그이지만, <strong>은 중요하다는 의미를 가진다.
브라우저는 <strong>을 확인하고 중요하다는 의미에 맞춰 굵은 스타일로 표현한 것이다.
만약 중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용하는 것이 적절하고 시멘틱한 마크업일 것이다.
이외에 <i>는 단순히 기울어진 글자를 표현하지만 <em>은 글자의 특정부분을 강조하는 의미를 가진다.
<u>와 <s>는 단순히 글자에 선을 그은 것이고 <ins>와 <del>은 내용이 새롭게 추가되거나 삭제가 되었다는 의미를 가진다.
우리가 쇼핑몰에서 물건을 살 때 자주 보는 화면이 있다.
이 상황에서 정가 10000원을 단순히 <s>로 표현하고 할인가를 추가하면 브라우저는 가격이 두개 있는 것으로 인식할 것이다.
정가 10000원을 <del>로 표현하고 할인가를 <ins>로 표현하면 브라우저는 정가 10000원이 삭제되고 할인가 9000원이 추가되었다고 인식하여 사람이 표현하고자 하는 의도대로 잘 이해할 것이다.
HTML5 시멘틱 요소
<article>
article 태그는 특정 부분을 그룹화할 때 사용한다.
해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용한다.
포럼 사이트나 블로그 포스트, 보도 기사, 논평 등에 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>article</title>
</head>
<body>
<article>
<h1>12월 12일 부산 날씨</h1>
<h3>흐림</h3>
</article>
</body>
</html>
<aside>
aside 태그는 문서에서 중요한 내용이 아니라 부가적인 내용을 담는 태그이다.
article 요소의 안쪽 또는 바깥쪽에 위치할 수 있다.
article 요소의 안쪽에 위치한다면 article의 본문 내용과 관련있는 내용이어야 하고
article 요소의 바깥족에 위치한다면 전체 웹페이지와 관련있는 내용이어야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>article</title>
</head>
<body>
<article>
<h1>12월 12일 부산 날씨</h1>
<h3>흐림</h3>
</article>
<aside>
<h2>다른 지역 날씨 보기</h2>
<h4>서울</h4>
<h4>제주</h4>
</aside>
</body>
</html>
<figure>, <figcaption>
figure 요소는 사진, 도표, 삽화, 오디오, 비디오, 코드 등을 담는 컨테이너 역할을 하는 태그이고,
figcaption 요소는 이에 대한 설명 문구를 담는 태그이다.
figcaption 요소는 figure 요소 안에 사용하며, 반드시 사용해야 하는 태그는 아니다.
단, figcaption 요소는 figure 요소에서 한 번만 사용할 수 있다.
figure 요소 안에는 여러가지 자식 요소들이 올 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>figure</title>
</head>
<body>
<figure>
<img src="https://w.namu.la/s/dcac377b449edd131d6a622ba068e29295fc0600192b61a4402cf2dd96b4dd4a9ee3eb5ee4ac8fc6a55c5b3b53f25ae3b4a2245fa9bfbcb8f6cddf9bf6129d750ac5cef8c3dd78ede14018ff78b58cfc2e6e9baff2f83d177d42d24e2bc11b15da985c934f19c2acd7e5fbd07689c109" alt="슬픈개구리 페페" width="200px" height="200px">
<figcaption>슬픈 개구리 페페가 침울해하는 표정을 짓고 있음</figcaption>
</figure>
</body>
</html>
<footer>
footer 요소는 문서에 대한 꼬릿말로서, 그 문서에 대한 정보를 담고 있어야 한다.
대체로 문서의 끝에 오는 경우가 많지만 꼭 그럴 필요는 없다.
글쓴이 정보, 저작권 정보, 연락처 정보, 사이트 맵, 맨 위로 돌아가기, 관계된 문서 등을 표현할 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>footer</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>본문입니다.</p>
<footer>글쓴이 : 김철용</footer>
</body>
</html>
<header>
header 요소는 보통 도입부에 해당하는 콘텐츠나 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.
문서나 특정 섹션의 헤더를 정의할 때 사용한다.
HTML 문서는 여러개의 header를 포함할 수 있고
header 태그 안에는 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함할 수 있다.
header 태그 내에 footer, address, 다른 header 엘리먼트를 사용할 수 없는 점을 주의해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>footer</title>
</head>
<body>
<article>
<header>
<h1>기사 제목</h1>
<p>본문 내용1</p>
<p>본문 내용2</p>
</header>
</article>
</body>
</html>
<main>
main 요소는 해당 문서의 body 요소의 주 콘텐츠를 정의할 때 사용한다.
main 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 한다.
또, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안된다.
main 요소는 하나의 문서에서 하나만 존재해야 하며
article, aside, footer, header, nav 요소의 자식이 될 수 없다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>main</title>
</head>
<body>
<main>
<h1>main</h1>
<p>main에 관해서...</p>
<article>
<h3>main의 역할</h3>
<p>.......</p>
</article>
</main>
</body>
</html>
<mark>
mark 태그는 사용자에게 관계된 텍스트를 강조하고자 할 때 사용한다.
검색 결과에서 찾은 키워드를 두드러지게 표시하여 사용자가 원하는 것을 쉽게 찾을 수 있도록하고
인용할 때 특정 텍스트를 강조하기 위해서 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>mark</title>
</head>
<body>
<mark>마킹</mark>
</body>
</html>
<nav>
nav 태그는 현재 웹 사이트에서 주요한 지점으로 이동할 수 있는 네비게이션 역할을 한다.
웹페이지의 목록에 주로 사용된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>nav</title>
</head>
<body>
<nav>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
</nav>
</body>
</html>
<section>
section 태그는 HTML 문서에 포함된 독립적인 섹션을 정의할 때 사용한다.
section 요소는 보통 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많다.
section 태그와 article 태그는 굉장히 비슷한데
section 태그는 영역을 감싸거나 구분할 때
article 태그는 영역을 나누지만 언제든 그 영역이 다른 페이지나 영역에서 가져다 사용할 수 있는 것으로 차이가 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>section</title>
</head>
<body>
<h1>article과 section</h1>
<section>
<h3>article</h3>
<p>article은.....</p>
</section>
<section>
<h3>section</h3>
<p>section은.....</p>
</section>
</body>
</html>
<time>
time 태그는 일반 텍스트로 보이는 날짜와 시간 정보를 실제 날씨, 시간 정보임을 브라우저에게 알려주기 위해 사용한다.
특히, datetime 속성은 time 태그 요소의 날짜와 시간 데이터를 기계가 읽을 수 있는 형태로 알려 준다.
datetime 속성값은 24시간 형태로 표현한 시간 데이터, 그레고리력으로 표현된 날짜 데이터, 유효한 기간 데이터가 올 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>time</title>
</head>
<body>
현재 시각은 <time datetime="2022-12-12T:15:08:50+09:00">15시 08분</time> 입니다.
</body>
</html>
위 시멘틱 태그들 대부분은 모두 html 코드로만 작성된 브라우저에서는 아무런 스타일이 적용되지 않는다.
의미를 강조하기 위한 태그이기 때문이다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| [CSS 이해하기] CSS 소개 (0) | 2022.12.13 |
|---|---|
| [콘텐츠 모델/시멘틱 마크업/블록&인라인] 블록&인라인 (0) | 2022.12.12 |
| [콘텐츠 모델/시멘틱 마크업/블록&인라인] 콘텐츠 모델 (0) | 2022.12.12 |
| [HTML 태그] 폼 요소 (0) | 2022.12.09 |
| [HTML 태그] 테이블 요소 (0) | 2022.12.08 |
