[HTML] 시맨틱 마크업, 엘리먼트 & 태그, 기본적인 & 구조적인 시맨틱 마크업, DOCTYPE
1. 시맨틱 마크업
- 어떤 의미가 있는지를 표현하는 것
- 예를 들어, 특정 HTML 태그를 사용하여 어떤 역할이나 용도가 무엇인지?
- <h1> 태그를 이용하여 '문서의 가장 높은 중요도 제목을 가진다'는 뜻을 알 수 있음
- <span> 태그와 CSS를 이용해서 <h1> 만큼의 글씨 크기를 키울 수 있지만, 서로 같은 뜻을 가지진 않음
- 주로 웹에서 검색할 때, 검색 엔진이 페이지별 태그의 뜻을 가지고 중요한 키워드만 찾아서 검색함. 그래서 시맨틱 마크업을 적절하게 사용해야 좋음
2. 엘리먼트 & 태그, 블록레벨 & 인라인레벨 엘리먼트
2-1. 엘리먼트 & 태그
- 엘리먼트는 HTML문서의 개별적인 구성요소 --> p (p 엘리먼트)
- 태그는 부등호기호(<>)로 둘러싸인 태그 --> <p> (p 태그)
2-2. 블록레벨 엘리먼트
- 블록처럼 쌓여 가면서 줄 바꿈을 함.
- 너비값은 브라우저 화면에 100%로 꽉 차게 표시됨.
- 새로운 줄을 시작하여 사용.
- 블록레벨 엘리먼트 안에 인라인레벨 엘리먼트도 쓸 수 있음.
- <address>, <br>, <header>, <form> 등이 있음. 더 많은 엘리먼트는 여기서.
2-3. 인라인레벨 엘리먼트
- 같은 줄 안에서 이어서 표시됨.
- 너비값은 요소가 가지고 있는 값 크기로 나타남.
- 데이터와 인라인레벨 엘리먼트만 포함해서 표시할 수 있음.
- 새로운 줄을 생성하지 않고 바로 표시함.
- <a>, <span>, <input>, <button> 등이 있음. 더 많은 엘리먼트는 여기서.
3. 기본적인 시맨틱 마크업
- <h1> ~ <h6> : 한 문서의 제목 중요도를 표시
- <p> : 문단 정의
- <address> : 주소 정의
- <div> : 블록레벨 엘리먼트들을 묶어서 CSS 스타일 적용할 때 사용. 블록레벨 엘리먼트.
- <span> : 인라인레벨 엘리먼트들을 묶어서 CSS 스타일 적용할 때 사용. 인라인레벨 엘리먼트.
4. 구조적인 시맨틱 마크업
- <header> : 섹션 또는 페이지의 머리말 영역. 블록레벨 엘리먼트.
- <nav> : 네비게이션 링크들을 포함한 메뉴 영역. 블록레벨 엘리먼트.
- <article> : 글 또는 콘텐츠 영역. 블록레벨 엘리먼트. 신문 기사, 블로그 포스트 등의 독립적인 콘텐츠 영역.
- <section> : 페이지의 섹션 영역. 블록레벨 엘리먼트. <article> 영역 안에 여러 개의 <section> 구조로 구성.(<article> 큰 페이지, <section>으로 처음, 중간, 끝 구분).
- <footer> : 섹션 또는 페이지의 꼬리말 영역. 블록레벨 엘리먼트.
5. DOCTYPE
- Document type 줄인말로, 어떤 종류의 HTML 페이지인지 웹 브라우저에게 알려주는 것
- <html> 태그 위에 반드시 선언
- HTML5 에서는 <!DOCTYPE HTML>
- HTML4.01 또는 XHTML1.0 버전은
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
- DTD(Document type definition)는 어떤 태그들을 사용할 수 있는지 알려주는 지침
웹 표준을 엄격하게 지키면서 작성하고 싶다면 - strict
웹 표준을 지키는데 그다지 엄격하지 않으면서 절충점을 찾고 싶다면 - transitional
웹 표준보다 초창기 방식을 그대로 쓰고 싶다면 - frameset
- 'HTML Validator' 서비스는 DOCTYPE 선언 기준으로 태그가 제대로 작성되어 있는지 체크하는 사이트
출처 및 참고
- 쉽게 배우는 웹앱&하이브리드앱, 김응석 저, 이지스퍼블리싱
- https://developer.mozilla.org/en-US/docs/Glossary/Semantics
- https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements
- https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
'Web Development > HTML & CSS' 카테고리의 다른 글
| [CSS] CSS, 3가지 적용 방법, 상속 개념 (0) | 2017.02.06 |
|---|
