HTML5이전까지는 웹페이지의 구조를 표현하는 태그가 없었기 때문에 div태그나 table 태그를 이용하였지만 문서의 구조 파악이 어려웠다. 이를 개선하기 위하여 HTML5에서는 웹 문서를 구조화할 수 있도록 시맨틱 태그(레이아웃 표준 태그, Semantic tag)들이 추가되었다.
- <header>
페이지나 세션의 머리말을 표현하는 태그로 페이지의 제목, 페이지를 소개하는 간단한 설명이 들어감 - <nav>
하이퍼링크들을 모아놓은 부분이라던지 페이지 내 목차를 만들기 위해 사용됨 - <main>
HTML5.3이후에 나온 시맨틱 태그로, 페이지 내에서 단 한번만 선언이 가능하다. 오로지 <body>영역에서 사용한다. - <section>
문서의 장을 구성하는 역할로, section에는 헤딩태그로 섹션의 주제를 적는 것이 좋다. - <article>
독립적인 컨텐츠를 담는 영역이다. - <aside>
페이지의 오른쪽이나 왼쪽에 주로 배치되어 웹 페이지의 본문과 관계 없는 것들을 작성한다. - <footer>
꼬리말 영역으로 저자나 저작권 정보 등을 표시한다. - <address>
제작자의 정보나 연락처 정보 등을 작성하는 곳으로 검색엔진 때문에 사용한다. - <div>
컨텐츠 안에서 세부적으로 나눌 때는 div 태그를 통해서 나누고 있다.
아래의 예제는 나의 티스토리를 기준으로 웹 페이지를 구조화해본 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 1000px;
height: 500px;
box-sizing: border-box;
}
ul {
list-style: none;
}
.menu>li {
display: inline-block;
margin: 5px;
padding: 5px;
}
aside,
section {
display: inline-block;
}
section {
padding: 10px;
width: 500px;
}
aside {
/*vertical-align: 인라인 스타일 태그 (인라인, display: inline-block, inline )와 표에서 사용해서
수직 정렬을 지정하는 속성 */
vertical-align: top;
}
.category {
width: 200px;
}
.category>li:nth-of-type(1) {
font-weight: bold;
}
.category>li {
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<header>
<h3> 코딩쥐의 공부방 </h3>
<nav>
<ul class="menu">
<li>홈</li>
<li>태그</li>
<li>방명록</li>
</ul>
<hr>
</nav>
</header>
<main>
<aside>
<ul class="category">
<li>분류 전체보기</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</aside>
<section>
<article>
<h3>HTML의 진행률을 알아보는 태그(progress, meter태그)</h3>
<p> 진행상태를 나타내는 태그는 progress태그와 meter태그가 있다. progress태그의 경우 작업의 진행 상태를, meter태그의 경우 알려진 범위 내의 값에서 얼마나
사용되었는지를
나타내는 태그이다. 예를 들어 progress태그는 진행률 표시를 하는데 사용하고, meter태그의 경우 디스크 사용량, 투표율 등에 사용된다. </p>
</article>
<article>
<h3>HTML에서 버튼을 만들어보자</h3>
<p>HTML 버튼은 사용자가 클릭할 수 있는 요소를 말한다. HTML에서는 버튼을 만드는 방법이 두 가지가 있는데 하나는 input type을 사용하는 방법이고, 다른 방법은
button태그를
사용하는 방법이다. HTML5부터 button태그가 추가되었으며, 웹 접근성이 중요해지면서 button 태그의 사용을 권장하고 있다. </p>
</article>
</section>
</main>
<hr>
<footer>
<p>티스토리 주소 : https://coding-ji.tistory.com</p>
</footer>
</body>
</html>
'Frontend > HTML' 카테고리의 다른 글
| HTML의 진행률을 알아보는 태그(<progress>, <meter>태그) (0) | 2024.07.01 |
|---|---|
| HTML에서 버튼을 만들어보자 (1) | 2024.06.30 |
| HTML에서 폼 요소를 사용해서 선택형 입력, 드롭다운 목록을 만들어보자 (0) | 2024.06.30 |
| HTML의 폼 요소를 사용해보자 (0) | 2024.06.30 |
| HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자 (0) | 2024.06.29 |
| HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그) (0) | 2024.06.28 |
| HTML에서 표(table)를 만들어보자 (0) | 2024.06.27 |
| HTML의 <a>태그에 대해 알아보자 (0) | 2024.06.27 |