일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- i3
- terraform
- Kubeflow
- Arch
- pacman
- kolla
- ubuntu
- archlinux
- awx
- repository
- OpenStack
- Octavia
- Docker
- k8s
- nfs-provisioner
- cloud-init
- grafana-loki
- HTML
- cephadm
- libvirt
- golang
- kolla-ansible
- yum
- port open
- Kubernetes
- KVM
- ceph
- Ansible
- Linux
- ceph-ansible
Archives
- Today
- Total
YJWANG
2.HTML semantic tag 본문
이미지 출처 https://velog.io/@wan-seung/Semantic-Web-and-Semantic-Tag
HTML의 semantic tag는 각 tag의 속한 다른 tag및 요소들이 web page에서 어떤 부분을 가리치고 있는지 나타냅니다.
위와 같은 semantic tag를 이용하여 웹 페이지를 구조화할 수 있습니다.
아래 코드만으로는 다른 점을 찾기 어렵지만 CSS와 함께 웹페이지를 꾸미다보면 구조화 하는 것이 편함을 알 수 있습니다.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>2번 실습 페이지</title>
</head>
<body>
<header><h1>2번 실습</h1></header>
<nav>
<h2>first navigation</h2>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</nav>
<section>
<article>
<header><h3>First</h3></header>
<p>
첫번째 목차에 해당되는 내용입니다.
</p>
</article>
<article>
<header><h3>Second</h3></header>
<p>
두번째 목차에 해당되는 내용입니다.
</p>
</article>
</section>
<footer>
<address>+82-1234-5678</address>
</footer>
</body>
반응형