민자의 지식창고

HTML5 시맨틱 마크업 알아보기 본문

개발노트/HTML

HTML5 시맨틱 마크업 알아보기

전지적민자시점 2018. 6. 11. 13:10

1.시맨틱 마크업이란?


(웹 표준 권고사항)

웹페이 제작시 W3C에서 웹 표준을 만들어 권고하는 내용으로, 태그를 사용하여 내용이 담고있는 의미가 무엇인지 정확히 표현한다.


화면의 표시와 관계된 디자인은 HTML을 대신하여 CSS를 사용하여, 구조와 표현을 구분한다 


기초적인 Element 정의는 아래와 같다.


<p> : 문단 정의

<em> : 문단 강조

<strong> : 문단 더 강조


<address> : 문서 저자나 소유자를 위한 연락처 정보 정의

'mailto:' 이메일 주소 클라이언트 프로그램이 뜨면서 별도 타이핑 하지 않아도 이메일 주소가 입력이 된다.


<div> :  html 문서에서 영역 정의.  블록레벨 엘레먼트 그룹으로 묶어서 CSS를 적용하여, 디자인을 입힐 때 많이 사용

<div style ="background-color : #008000">

 div 엘레멘트 안의 특성으로 Style을 주고 큰 따옴표 안에 CSS 스타일을 입력하면 디자인이 적용이 된다.

<span> : html 문서에서 영역 정의. 인라인 레벨 엘레먼트 그룹으로 묶어서 CSS를 입히거나, 자바스크립트로 처리 할때 사용 한다.


인라인레벨과 블록레벨 목적은 동일하나, 차이가 확실하다.


 * 블록레벨 : 항상 새로운 줄로 줄바꿈 표시.  너비값은 브라우저화면 100% 차지

 * 인라인레벨 : 같은 줄안에서 이어서 표시. 너비 값은 요소가 가지고 있는 값 자체 표시

 

공통적으로 사용하는 HTML의 틀은 아래와 같다.


<header> ...</header> - 머리말 영역

<nav> ...</nav> - 메뉴 영역 

<article> - 콘텐츠 영역

 <section>...</section> -콘텐츠 구분 영역

</article>

<footer> ...</footer> 꼬리말 영역



각 태그의 내용은 아래와 같다.


<header> : 문서의 시작 부분, 로고 , 제목, 메뉴 등 지정

<nav> : 사이트로 이동하기 위한 메뉴 영역

<article> : 독립적으로 존재할수 있는 콘텐츠 영역

<section> : 큰 영역의 장, 그안에 구분이 필요하면 절 등으로 좁혀가서 나누는 부분

<footer> : 섹션이나 문서의 꼬리말의 정의 꼬리말에는 저자, 문서가 작성된 날짜, 연락처 등의 정보를 포함



2.W3C HTML 웹 표준 인증


DOCTYP은  웹페이지의 타입을 지정하는 선언문 이다.


 html5 태그를 사용할때의 doctype 선언 방법

 <!DOCTYPE HTML>


html4.01과 xhtml1.0은 거의 동일하고, 차이점은 xml의 사용여부 입니다. 즉 xml을 사용해서 html4.01을 확장한것이 xhtml1.0 입니다.


xhtml은 Extensible HTML의 약자로 HTML보다 더 엄격한 문법체계를 가지고 있음. 좀더 정확하게 지원하기 위해 DTD를 사용해 xhtml문서를 규정한다.


DTD (Document type definition) 현재 사용하는 html버전에서 어떤 태그들을 사용할수 있는지 알려주는 지침.

세가지 범주로 DTD를 정의 합니다.  strict, transitional, frameset


웹표준을 엄격하게 지키면서 작성 하겟다 strict - font ,center, frame 총 14가지 엘레멘트를 쓰지 않겠다

웹표준을 지키나 절충점을 찾아 작성 하겠다 transitional - frame, frameset만 제외

웹표준보다 초창기 방식으로 쓰겠다 frameset - 모든 HTML 엘레멘트 사용


W3C사이트에서 HTML Validator라는 서비스를 제공 받는다.

DOCTYPE에 선언된 것을 기준으로 태그가 올바르게 작성 되었는지 여부 확인해준다.

validator.w3.org에 접속하여, 'Markup Validation Service' (마크업 유효성 검사 서비스)













728x90
저작자표시 비영리 변경금지

'개발노트 > HTML' 카테고리의 다른 글

HTML 기본 정리2  (0) 2020.08.31
HTML 기본 정리1  (0) 2020.08.31
HTML& CSS 기초1  (0) 2020.08.31
HTML의 <div> ,<span>  (0) 2020.08.24
스마트폰 페이지 전환 효과 익히기  (0) 2018.06.12
'개발노트/HTML' Related Articles more