본문 바로가기

웹표준/Semantics(의미론)

1. HTML5의 개요

HTML5 개요

<!DOCTYPE html>

- 문서에 html5마크업이 포함되었음을 알리는 구문

- doctype을 선언함과 동시에 HTML5를 지원하지않는 브라우저도 표준모드로 전환된다.

 

<meta charset>

- 페이지에서 일반적으로 사용되는 문자셋을 <head>내부에 선언

- ASCII와 호환되며, 최소 8비트 이상을 사용하는 문자셋으로 제한.

 

새로운 파서의 사용

- 마크업에 작은 오류가 발생하면 브라우저 환경에 따라 동작이 정의되지 않았던 과거와 달리,

모든 호환 브라우저가 동일한 방식으로 작동.

 

  • 파싱(parsing) : 특정문서를 읽어 들여서 다른 방식의 표현식으로 변환시켜주는 행위. 예를들어 html태그를 시각적 화면으로 분할하는 행위
  • 파서(parser) : 파서는 파싱을 하는 프로세서를 일컫는다. 컴파일러와 인터프리터가 이에 해당된다.

 


 

HTML5에 추가된 의미론적인 요소인 시멘틱 태그를 공부해보자.

 

1 .<header>

- 일반적으로 로고, 제목 및 <nav>가 포함된 요소

- <article><section><aside><nav>를 포함할 수 있으며, 이름과 다르게 반드시 페이지나 섹션의 시작 부분에 위치할 필요는 없음.

 

 

2. <nav>

- 사이트에 자주 나타나는 탐색 링크가 포함된 요소.

- 기본 및 보조 메뉴를 사용 할 수 있지만, 요소를 중첩하여 배치 금지
- SNS 같은 링크리스트에 사용 금지

 

3. <article>

- 자체적인 컨텐츠를 정의하는 요소.

- 기본 컨텐츠를 언급하지 않고 주석 및 위젯에 사용된다.

- <article> 요소를 제외한 다른 모든 HTML을 제거한 경우에도 <article> 요소는 독자에게 의미를 가진다

- heading요소를 반드시 자식으로 가져야한다

 

4. <section>

- 의미적인 그룹을 구분하기위한 요소 

- 일반적인 컨테이너로 사용금지 (그럴땐 div사용)

- heading요소를 반드시 자식으로 가져야한다

 

5. <aside>

- 설명 상자나 광고와 같이 페이지의 흐름과 관련없는 영역에 대한 요소

 

6. <footer>

- 일반적으로 저작권, 법적 고지, 때로는 외부로의 링크를 정의.

- 이름과 다르게 반드시 페이지나 섹션의 끝부분에 위치 할 필요는 없음.

 


 

시멘틱태그를 사용한 웹페이지 예제.

'웹표준 > Semantics(의미론)' 카테고리의 다른 글

6. 수학적 수식을 나타내기위한 MathML  (0) 2020.03.20
5. 표준화된 <iframe>  (0) 2020.03.19
4. HTML5 태그 정리  (0) 2020.03.19
3. HTML 폼태그  (0) 2020.03.19
2. HTML5 비디오/오디오 요소  (0) 2020.03.17