METADATE
- " base, link,meta, noscript, script, style, title ” 등이 있다
- 대부분 헤드태그 내에서 사용된다
Flow
- 대부분의 태그에 속한다
" a, abbr, address,map>area, article, aside,audio, b, bdo, blockquote,br, button,
canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,
fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img,
input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr "
Sectioning
- " article, aside, nav, section “
- html5에서 새로생긴 태그들이다
- 문서의 구조, 아웃라인에 영향을 준다
Heading
- h1~h6
- 제목태그를 뜻한다
Phrasing
"a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed,
i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output,
progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
var, video, wbr"
- 텍스트 문단을 내부를 마크업하는 태그들이다
EMBEDDED
- 외부컨텐츠를 문서에 가지고 오는 코드이다.
- audio, canvas, embed, iframe, img, math, object, svg, video
INTERACTIVE
- 사용자와 상호작용하는 요소들을 뜻한다
a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls]
시멘틱 마크업
- 의미론적인 마크업
- 브라우저가 코드에 의미를 이해할수 있도록 하는 코드이다.
- 의미에 맞는 요소를 사용해야한다
- 문서의 구조화를 한다
- 사람과 브라우저가 동시에 이해할수 있게 한다.
<b>굵은</b> vs <strong>중요한</strong> <br>
<i>기울어진</i> vs <em>강조하는</em><br>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins><br>
<s>중간선이 있는</s> vs <del>삭제된</del>실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/3-1.html
위에 vs로 비교되고 있는 코드의 출력값은 동일하다
하지만 b는 굵게 나타내는 태그라면 strong은 브라우저에서 중요한 의미라고 이해한다
i는 기울어진 태그이지만 em으로 표기하면 강조된다고 인식한다
이처럼 브라우저안에서의 중요도를 인식하는 하게 하는 태그가 시멘틱 마크업이라 할수있다.
Html5의 시멘틱요소
html5의 새로운 시멘특요소가 있다
이 페이지에서 실제로 예제를 활용해보고 어떤쓰임새인지 파악할수 있다.
Block&Inline Level
- block level : 한줄에 하나의 요소
- div, h1~h6, p, ul, li, table…
- inline level : 한줄에 여러개의 요소 표시
- block레벨 요소는 포함할수 없다, span, i, img, em, strong….
