반응형
예전에는 HTML에서 구조적 마크업과 표현적 마크업을 혼용해서 사용하였다.
현재 웹 표준에서는 이러한 혼용은 유지보수를 증대시키기 때문에 HTML에 퇴출당한 상태이다.
현재의 문서의 구조는 HTML을 사용하고 표현은 CSS를 사용한다.
HTML 섹션 요소
- <section> : 보통 제목으로 시작하는 콘텐츠의 의미적 그룹
- <nav> : 문서의 동일 페이지 또는 다른 페이지를 연결하는 네비게이션 링크로 구성되는 섹션
- <article> : 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용 할 수 있는 섹션
- <aside> : 문서의 주요 콘텐츠와 별개의 영역 정의, 대체로 사이드바 형태
- <header> : 페이지 또는 섹션의 머릿글 그룹, 제목, 소개, 네비게이션 등이 포함
- <footer> : 가장 가까운 조상 요소의 푸터, 섹션 요소가 아님
- <h1> ~ <h6> : 섹션의 제목, 헤딩은 명시적 섹션을 생성
- <hgroup> : h1~h6 요소들을 그룹 짓기 위해 사용, <hgroup> 의 등급은 포함된 헤딩 요소의 가장 높은 등급
- <address> : 가장 가까운 조상 요소인 article 또는 body 요소의 연락처 정보를 의미
<aticle>
<h2>기사 제목</h2>
</aticle>문서, 페이지, 애플리케이션, 사이트 등에 포함된 독립적인 섹션을 말한다.
잡지, 신문, 논문, 에세이, 보고서, 블로그, 기타 소설 미디어 일 수 있음.
일반적인 규칙은 article 요소의 내용이 문서 개요에 명시적으로 나열되는 경우에만 적합하다.
각 article 요소는 일반적으로 요소의 하위 항목으로 <article> 내부에 <section> 태그를 포함할 수 있고, 반대로 <section> 내부에 <article>를 포함할 수 있다.
반드시 제목(h1~h6 요소)을 포함시켜 요소를 식별해야 한다.(웹 접근성 측면에서)
<nav>
<h1>메인 내비게이션</h1>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</nav>
링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것으로 단순 본문 링크와 메뉴(카테코리) 성격의 링크인지 확인이 가능하다.
ul,li,a 요소들을 여전히 함께 사용해야 한다.
브라우저가 네비게이션 영역을 알 수 있게 되면 스크린더의 내비게이션과 검색엔진의 색인에도 도움을 줄 수 있다.
<article>
<header> 위키피디아 </header>
<section>
위키피디아는 의미있는 웹 기반의 자유로운 백과사전으로, 전 세계 누구나 참여할 수 있다.
....
....
</section>
<aside>
"지구상에 모든 사람이 모든 인류 지식에 자유롭게 접근할 수 있는 세계를 상상해 보라.
그것이 우리가 하는 일이다"
</aside>
</article>
<header>header 태그에 들어갈 태그</header>header 태그에는 위와 같이 회사명 또는 로고, 메뉴, 검색창등이 위치합니다.
<footer>
<p>Copyright © 2018 tcpschool.co.,Ltd. All rights reserved.</p>
<address>Contact webmaster for more information. 070-1234-5678</address>
</footer><footer> 태그는 문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용합니다.
푸터(footer)는 보통 <footer> 요소가 포함되어 있는 문서나 섹션에 대한 아래와 같은 정보를 포함합니다.
- 저자(author) 정보
- 저작권 정보
- 연락처
- 사이트맵(sitemap)
- 페이지 맨 위로 되돌아갈 수 있는 Top 버튼
- 연관 페이지 등
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>h1 테스트</h1>
<h2>h2 테스트</h2>
<p>띄우기!</p>
<hgroup>
<h1>h1 테스트</h1>
<h2>h2 테스트</h2>
<p>띄우기!</p>
</hgroup>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</p>
<address>
E-Mail : xxx@xxx.xxx<br>
Address : Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
TEL : 123-123-123-123
</address>
</body>
</html>
반응형
'개인공부' 카테고리의 다른 글
| web공부 (0) | 2020.04.21 |
|---|---|
| GIT 시작하기(버전관리의 본질) (0) | 2020.03.13 |
| HTML 기본 (0) | 2020.03.10 |
| HTML5 개념 (0) | 2020.03.09 |
| GIT ( git의 원리) (0) | 2020.03.04 |
