프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[HTML] HTML5 기본구조 시맨틱 태그 구조

2016.05.24
북마크 [출처 이동]    작성자 정보
첨부이미지(0/1)
1. 기본구조
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style></style>
<script></script>
</head>
<body>
</body>
</html>


2. 시맨틱 태그 구조
- <div id="header">등으로 지정했던 것들을 시맨틱 태그로 만들어 한눈에 구분할 수 있게 되었다.
- <header>,<nav>,<section>,<acricle>,<footer>,<address>,<div>,<iframe>등

1) <header> 태그 -머리말(제목)지정
2) <nav> 태그 - 문서를 연결하는 네비게이션 링크
3) <section> 태그 - 콘텐츠 영역
4) <acticle> 태그 - 실제 콘텐츠 내용 표시
5) <aside> 태그 - 본문 이외의 내용 표시
6) <footer> 태그 - 제작 정보와 저작권 정보표시
7) <address> 태그 - 사이트 제작자 정보 연락처 정보 보통 <footer> 태그 안에 사용
8) <div> 태그 - 주로 콘텐츠를 묶어 시각적으로 효과를 적용하려고 할때 사용
9) <iframe> 태그 - 외부 문서 삽입기, <iframe src="콘텐츠 주소" 속성="속성값"></fream>
-width, height, name, src ...

이 포스트 공유하기

전체목록