HTML5를 판별하는 기준은 바로 새로운 문서 형식(Doctype)에 있습니다.
<!doctype html>을 선언함으로서 HTML5 문서로 인식할 수 있으며, 웹
브라우저에서는 가장 최신의 렌더링 엔진을 이용하게 됩니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 마크업</title>
</head>
<body>
<p>차세대 웹표준으로서 HTML5</p>
</body>
</html>
HTML 형식의 문서
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
iframe과 같은 요소가 외부 콘텐츠를 포함할 때 text/html-sanboxed
형식을 선언할 수 있게 할 것입니다. XML 형식으로의 구성도 가능합니다.
XML로 구성된 문서는 반드시 application/xhtml+xml나
application/xml로 배포되어야 합니다.
XML 형식의 문서
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
HTML5에서는 새로 추가된 간소화된 구문을 포함한 아래 두가지의
meta 태그를 모두 사용할 수 있습니다.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
HTML5에서는 MathML이나 SVG를 문서 안에서 사용할 수 있습니다.
<!doctype html>
<title>SVG in text/html</title>
<p>
A green circle:
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
HTML4에서는 문서의 구조를 만들때 div, span 요소를 id, class와 함께
사용하였습니다. 문서의 구조를 나타내는 요소가 풍부하지 않아서 복잡한 페이
지의 경우 많은 중첩된 div요소를 사용하였습니다. HTML5에서는 문서의 구조
를 만드는 새로운 개념과 요소들이 추가되어서 보다 구조적인 문서를 만드
는 것이 가능해졌습니다.
새로 추가된 요소들은 현재 파이어폭스3, 사파리3.1, 크롬2, 오페라 9.6
등 최신의 브라우저에서 문제없이 사용할 수 있습니다. 단 인터넷 익스플로러는
이러한 요소를 제대로 표현해 주지 못하기 때문에 createElement 메서드
를 이용해서 활성화 해주는 과정이 필요합니다.
예를 들어서 인터넷 익스플로러에서 header 요소를 사용하기 위해서는
아래와 같은 스크립트를 head 요소에서 먼저 실행해 주어야 합니다.
document.createElement('header');
책의 1장, 2장이나 탭형식으로 되어 있는 콘텐츠의 각 탭에 section 요소를
쓸 수 있습니다. 만약 스타일링이나 스크립트를 위해서 감싸는 요소가
필요하다면 이론 용도로는 section을 사용해서는 안됩니다. 이러한 용도로는 문서
구조상으로 특별한 의미가 없는 div 요소를 사용해야 합니다.
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple
pies.</p>
</section>
</article>
nav
네비게이션을 위해 구성된 섹션을 나타냅니다.
페이지 않에 있는 모든 링크의 그룹이 nav 요소로 기술될 필요는 없습니다.
nav 요소로는 그 페이지의 주요 네비게이션 링크들만 묶어주는 것이 좋습니다.
일반적으로 푸터에서 그 사이트의 주요 페이지로 이동하는 링크를 제공하는
경우가 많은데 이러한 링크는 푸터 안에 표시하는 것 만으로도 그 목적을
가늠할 수 있기 때문에 nav 요소를 사용할 필요는 없습니다.
그렇다고 한 페이지 안에서 nav 요소를 하나만 사용해야 하는 것은 아닙니다.
사이트 전반적인 이동을 위한 네비게이션과 페이지 전체를 이동하는
네베게이션이 있는 경우 각각을 nav 요소로 기술 할 수 있습니다.
article
문서내의 독립적인 글을 article로 표시할 수 있습니다. 블로그 글이나 뉴스
본문 등이 이에 해당합니다.
article 요소 안에 article 요소가 들어갈 경우 안쪽의 article 요소는 밖의
article 요소의 내용과 관련이 있는 내용이라는 것을 의미합니다.
예를 들어서 블로그의 글과 사용자가 작성한 댓글이 있는 경우 하나의 댓글은
안쪽 article로 기술하고 전체 블로그 글은 바깥쪽 article로 기술 할 수 있습니다.
aside
문서의 주 내용이 아닌 관련성이 낮은 내용들은 aside로 표시할 수 있습니다.
본문과 직접적으로 상관이 없는 관련 사이트 링크나 광고, nav 요소의 그
룹 등이 aside 요소로 기술 될 수 있습니다.
hgroup
섹션의 제목을 나타냅니다.
섹션의 제목이 여러 단계를 가지고 있을 때 이를 hgroup 요소로 기술
할 수 있습니다. 문서의 구조를 나타낼 때에는 hgroup 안에 있는 가장 높은
레벨의 헤딩을 사용하고 나머지 요소들은 문서의 구조에서는 타나나지 않
습니다.
header
소개나 네비게이션 기능들의 묶음을 나타냅니다.
header 요소는 보통 섹션의 제목(h1, h2, h3, h4, h5, h6)을 포함하지만
반드시 포함할 필요는 없습니다. 또한 header 요소는 목차나 검색창, 로고 등
을 포함할 수도 있습니다.
header 요소는 섹션으로 간주되지 않습니다. header 요소를 썼다고 문서
구조상 새로운 섹션이 생기지 않습니다.
footer
섹션의 푸터를 나타내고 저자나 저작권 등을 포함할 수 있습니다.
footer 요소도 header 요소와 마찬가지로 섹션으로 간주되지 않습니다.
footer 요소를 썼다고 문서 구조상 새로운 섹션이 생기지 않습니다
figure
그래픽이나 비디오를 위한 캡션을 표시할 수 있게 한다. figcaption 요소
로 캡션을 표시한다.
본문에서 참조가 되지만 내용의 흐름에 크게 영향을 미치지 않는 일러스
트, 다이어그램, 사진, 코드 등을 표시할 수 있다.
<figure>
<video src="ogg"></video>
<figcaption>Example</figcaption>
</figure>
blockquote, body, details, fieldset, figure, td는 섹셔닝 루트
(sectioning root) 요소들로, 이 요소들은 자기 자신만의 아웃라인을 가지
고 상위 요소 문서의 아웃라인에 영향을 미치지 않습니다.
<body>
<h1>Foo</h1>
<h2>Bar</h2>
<blockquote>
<h3>Bla</h3>
</blockquote>
<p>Baz</p>
<h2>Quux</h2>
<section>
<h3>Thud</h3>
</section>
<p>Grunt</p>
</body>
섹션 헤딩의 단계는 크게 상관없지만 되도록 h1 요소를 사용하거나 섹션
구조에 맞는 단계의 헤딩을 사용할 것을 권장합니다.
<body>
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<h6>Sweet</h6>
<p>Red apples are sweeter than green ones.</p>
<h1>Color</h1>
<p>Apples come in various colors.</p>
</section>
</body>
즉, 이렇게 헤딩의 단계가 순차적이지 않아도 유효한 구조적인 문서로 판
단할 수 있습니다. 하지만 아래와같이 섹션을 명시적으로 지정해 주는 것이 더
좋습니다.
<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
</body>
video, audio
비디오나 오디오 콘텐츠를 넣기위해 사용된다. 스크립트로 제어할 수 있
게끔 스크립트 API가 제공됩니다. source 요소로 여러개의 미디어를 추가할
수있습니다.
embed
플러그인 콘텐츠를 넣을 때 사용됩니다.
mark
중요 텍스트를 표기할 때 사용됩니다. 예를 들어 원 저자는 중요하다고 표
현하지 않았지만 이 글을 따왔을 때 중요한 부분이 변경되거나 추가된다면
이 텍스트를 mark 요소로 표현할 수 있습니다.
progress
다운로드 상태바 처럼 작업의 진행상황을 나타낼 때 사용됩니다.
meter
분량이나 수량을 나타낼 때 사용됩니다.
time
날짜나 시간을 나타낼 때 사용됩니다.
ruby, rt, rp
일본어에서 한문에 음을 다는 것과 같은 루비 주석(ruby annotation)을
달 때 사용됩니다.
canvas
그래픽이나 게임과 같이 동적인 비트맵 이미지를 구현할 때 사용됩니다.
command
사용자가 행할 수 있는 명령 기능을 나타낼 때 사용됩니다.
details
사용자의 필요에 의해서 사용할 수 있게 제공되는 추가적인 정보나 기능
을 나타낼 때 사용되니다. summary 요소를 이용해서 요약, 제목, 캡션을 나
타낼 수 있습니다.
datail 요소를 이용해서 상세한 내용을 사용자의 선택에 의해서 보이거나
감출 수 있다.
<section class="progress window">
<h1>"Really Achieving Your Childhood Dreams" 복사중...</h1>
<details>
<summary>복사중...
<progress max="375505392" value="97543282"></progress> 25%
</summary>
<dl>
<dt>초당 전송량:</dt> <dd>452KB/s</dd>
<dt>복사할 파일명:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>대상 파일명:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>걸린시간:</dt> <dd>01:16:27</dd>
<dt>컬러 프로파일:</dt> <dd>SD (6-1-6)</dd>
<dt>영상 크기:</dt> <dd>320×240</dd>
</dl>
</details>
</section>
datalist
미리 정의되어 있는 option의 묶음을 나타냅니다. input의 list, datalist의id로 서로 연결됩니다.
keygen
서버에 공개키를 보내고 로컬의 키 저장소에 개인키를 저장하는데 사용됩니다.
output
서식이나 스크립트를 통해 생성된 결과물을 나타낼 때 사용됩니다.
input
input 요소의 type 속성으로 다음과 같은 다양한 형식을 사용할 수 있
게 되었습니다.
tel, search, url, email, datatime, date, month, week, time, datetime-local, number, range, color. 이러한 속성을 사용해서 달력이나
컬러 픽커와 같은 기능을 브라우저에서 제공할 수 있습니다.
style, script
style 요소와 script 요소의 type 속성이 생략 가능해졌습니다. style 요소의
기본 type 값은 "text/css", script 요소의 기본 type 값은
"text/javascript"이기 때문에 둘 다 type 요소를 생략할 수 있게 되었습니다.
<style>
#myelement {
width: 100px;
}
</style>
<script>
function myfunction() {
return 'Hello world';
}
</script>
media
a와 area 요소에는 link 요소와 마찬가지로 media 속성을 지정할 수 있습니다.
ping
a와 area 요소에는 링크를 따라 갔을 때 참조될 ping 속성을 지정할 수있습니다.
ping 속성을 지정하면 사용자 클릭 정보 수집과 같은 곳에 사용할 수 있고
사용자는 이를 옵션에서 제어할 수 있게 됩니다.
hreflang, rel
area 요소에는 link와 a 요소와 마찬가지로 hreflang과 rel 속성을 지정할 수 있습니다.
target
base 요소에는 a 요소와 마찬가지로 target 속성을 지정할 수 있습니다.
HTML4에서 strict DTD를 사용할 때에는 target을 쓸 수 없었지만
iframe과 같이 웹에서 이미 유용하게 사용하고 브라우저에서 지원도 많이
되고 있기 때문에 HTML5에서는 사용할 수 있습니다.
value, start: li요소의 value 속성과 ol 요소의 start 속성은 구조와 관련
된 속성이기 때문에 더이상 폐지된 속성이 아닙니다.
charset
meta 요소의 charset 속성이 추가되었다. 이미 많이 사용되고 잘 지원되
고 있는 속성입니다.
autofocus
input 요소의 type 속성이 hidden일 때를 제외하고 input, select,
textarea, button 요소에 autofocus 속성이 추가되었습니다.
이 속성은 문서가 로드되었을 때 폼에 포커스가 되게 합니다. 사용자는 이
러한 동작을 옵션에서 끌 수 있어야 합니다.
placeholder
input 요소와 textarea 요소에 placeholder 속성이 추가되었습니다.
placehoder 속성의 값은 input이나 textarea 요소에 값이 입력되기 전
에 힌트 정보로 표시됩니다. 포커스를 받기 전까지 placeholder 값이 표시되
고 포커스를 받거나 값이 입력되면 표시된 값이 사라집니다.
긴 힌트를 위해서는 placeholder 대신에 title 속성을 사용해야 하며,
placeholder는 label을 대시할 수는 없기 때문에 label은 별도로 지정이
되어있어야 합니다.
<input type="email" name="address" placeholder="abc@def.com">
form
input, output, select, textarea, button, fieldset 요소에 form 속성을
지정하여 form 요소의 밖에 콘트롤을 위치할 수 있게 되었습니다
required
input 요소의 type 속성이 hidden, image 이거나 button 요소의 속성
이 submit인 경우를 제외하고 input과 textarea 요소에 required 속성이
추가되었습니다.
이 속성은 사용자가 반드시 값을 입력해야 한다는 것을 의미합니다.
HTML5는 폼 값 유효성 검사(validation)와 같이 자주 사용되는 폼 관련
기능을 표준화 하여 더욱 강력하고 풍부한 웹 폼을 만들 수 있게 하고 있습니다.
<h1>회원 등록</h1>
<form action="/newaccount" method=post>
<p>
<label for="username">이메일 주소:</label>
<input id="username" type=email required name=un>
<p>
<label for="password1">비밀번호:</label>
<input id="password1" type=password required name=up>
<p>
<label for="password2">비밀번호 확인:</label>
<input id="password2" type=password
onforminput="setCustomValidity(value != password1.value ? '비밀전호가
일치하지 않습니다.' : '')">
<p>
<input type=submit value="계정 생성">
</form>
이메일 주소와 비밀번호를 필수요소로 지정하였고, 비밀번화 확인 필드에
서는 입력된 값이 비밀번호와 일치하는지를 추가적으로 확인합니다.
disable
fieldset 요소에 disable 속성을 지정하여 전체 필드셋을 비활성화 할 수있습니다.
autocomplete 등
input 요소에 autocomplete, min, max, multiple, pattern, step 속성이
추가되었다. 또한 datalist와 함께 사용될때 list 속성을 지정할 수 있습니다.
formaction 등
input과 button 요소에 formaction, formenctype, formmethod,
formnovalidate, formtarget 속성을 지정할 수 있습니다. 이러한 속성들은
form 요소의 action, enctype, method, novalidate, target 속성을 재정의
하게 됩니다.
type, label
menu 요소에 type과 label 속성을 지정할 수 있습니다. 이 속성들을 이용해
서 브라우저에서 지원하는 컨텍스트 메뉴와 같은 기능을 제작할 수 있습니다.
scoped
style 요소에 scoped 속성을 지정하여 문서의 특정 부분에만 스타일이
적용되도록 할 수 있습니다.
async
style 요소에 async 속성을 지정하여 스크립트의 로딩과 실행 타이밍을조절 할 수 있습니다.
manifest
html 요소에 manifest 속성을 지정하여 오프라인 애플리케이션 API에
서 캐시 정보를 사용할 수 있습니다.
sizes
link 요소에 sizes 속성을 지정하여 아이콘의 기본 크기 정보를 표시할
수 있습니다.
reversed
ol 요소에 reversed 속성을 지정하여 번호 순서를 바꿀 수 있습니다.
sandbox 등
iframe 요소에 sandbox, seamless, srcdoc 속성을 지정하여 샌드박스로
지정할 수 있습니다.
2.2.4 글로벌 속성
HTML4의 글로벌 속성(class, dir, id, lang, style, tabindex, title)을 모
든 요소에 지정할 수 있게 되었습니다.
contenteditable
사용자가 내용을 수정할 수 있는 요소를 표시할 수 있습니다.
contextmenu
컨텍스트 메뉴를 지정할 수 있습니다.
data-*
저작자가 새로운 속성을 지정할 수 있습니다.
draggable
새로운 드래그 앤 드롭 API를 사용할 수 있습니다.
spellcheck
맞춤법 기능을 적용되거나 적용되지 않게 할 수 있습니다. 이 속성이 지정되
어 있으면 사용자가 맞춤법 기능을 제어할 수 있게 됩니다.
onclick, onfocus 등의 event
HTML4의 on{이벤트이름} 속성을 사용할 수 있고 video나 audio 요소
의 play와 같은 추가적인 이벤트 속성을 사용할 수 있습니다.
'React,Node,JQuery,js' 카테고리의 다른 글
| Node js, NPM 설치하기 (윈도우10) (4) | 2019.12.27 |
|---|---|
| yarn 이란? yarn 설치 방법 (Mac) (0) | 2019.12.24 |
| Mac 에 Node.js 설치하기. 터미널 사용 (2) | 2019.12.23 |
| Codepen 사용법 (html,css,javascript 실행 웹 툴) (0) | 2019.09.07 |
| Web Storage ( localStorage) 사용하기 (0) | 2019.01.27 |
댓글