본문 바로가기
웹코딩 배우기/· HTML

HTML5

by 닐기 2019. 10. 17.

 

html5... 2014년에 나왔다는데 이제야... 최근에 나온 것처럼 공부하는 내가 싫다.

 

- <section> : 주제별로 컨텐츠를 그룹화.

- <article> : 독립적 컨텐츠. 웹 사이트에서 나머지 부분과 무관하게 읽을 수 있는 컨텐츠. 블로그 포스트, 신문 기사.

- <header> : 문서나 섹션의 헤더 지정.

- <footer> : 문서의 바닥 글. footer에는 주소 작성자, 저작권, 이용 약관, 연락처등의 정보를 쓴다.

- <nav> : 탐색 링크 집합. 주로 카테고리를 정의.

- <aside> : 문서내 사이드 컨텐츠를 정의.

- <firure> + <figcaption> : 이미지의 설명 추가.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>문서 타이틀</title>
</head>
<body>
<div style="border: 1px solid #000; padding: 15px;">

<section>
	<h1>section</h1>
	<p>섹션은 주제별로 컨텐츠를 그룹화합니다.</p>
</section>
<section>
	<h1>section2</h1>
	<p>섹션은 주제별로 컨텐츠를 그룹화합니다.</p>
</section>

<nav>
	<p>nav 탐색 링크 집합. 주로 카테고리를 정의.</p>
	<a href="#">com</a>
	<a href="#">blog</a>
	<a href="#">game</a>
	<a href="#">web</a>
</nav>

<aside>
	<h2>aside</h2>
	<p>문서내 사이드 컨텐츠를 정의</p>
</aside>

<article>
	<header>
		<h1>article</h1>
		<p>독립적인 컨텐츠</p>
	</header>
	<p>header는 문서 또는 섹션의 헤더를 지정.</p>
</article>

<figure>
	<img src="https://k.kakaocdn.net/dn/bWxK0o/btqy6dzYlXw/8VrWlJh4zcZXVFC94kTkOK/img.png">
	<fieldset>이미지의 설명을 추가합니다.</fieldset>
</figure>

<footer>
	<p>닐기 티스토리</p>
	<p>연락처 - 02. 2222. 3333[보이스 피싱]</p>
</footer>

</div>
</body>
</html>

 

section

섹션은 주제별로 컨텐츠를 그룹화합니다.

section2

섹션은 주제별로 컨텐츠를 그룹화합니다.

article

독립적인 컨텐츠

header는 문서 또는 섹션의 헤더를 지정.

이미지의 설명을 추가합니다.

닐기 티스토리

연락처 - 02. 2222. 3333[보이스 피싱]