HTML (Hypertext Markup Language)
웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어.
HTML은 elements로 구성되어 있다.
HTML Element의 구조
- 여는 태그
- 닫는 태그
- 내용
- 요소: 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 한다.
Doctype
브라우저에게 문서 형식을 알려주는 부분으로, Doctype에 따라 브라우저는 렌더링 모드를 바꾸고 해당 렌더링 모드에 맞게 사용할 수 있는 태그와 속성이 변경된다.
Doctype을 사용하지 않으면 브라우저가 해당 문서의 형식을 알 수 없게 되고, 브라우저는 '비표준 모드'로 렌더링 모드를 변경하게 되어 문서 제작자가 의도한 레이아웃이 깨질 수 있다.
Doctype 선언 -> 표준 모드로 문서 인식 -> 이렇게 표준 모드를 유지하는 것을 크로스 브라우징이라고 한다.
Doctype 종류
-
Strict: 엄격한 규격으로 구조와 표현을 분리. 비표준 태그 사용 불가.
-
Transitional: 표준이 정립되지 않은 때에 만들어진 문서들과의 호환성을 유지하기 위해 만들어진 타입.
-
Frameset: 프레임셋을 지원하기 위한 문서타입.
-
HTML5
-
HTML 4.01 (Strict, Transitional, Frameset)
-
XHTML 1.0 (Strict, Transitional, Frameset)
Meta tag
브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있으며, <head></head>에 위치한다.
메타태그 속성
- http-equiv: 웹 브라우저 서버에 명령을 내림. content 속성의 정보, 값을 위한 HTTP header를 제공.
- name: 몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv와 같은 기능.
- content: meta 정보의 내용을 지정. name 속성과 http-equiv와 연관된 값을 줌.
메타태그 종류
- Keywords: 검색엔진에 의해 검색되는 단어 지정
- Description: 검색 결과에 표시되는 문자 지정
- robots: 검색 로봇 제어 (ex. 검색 결과에 페이지를 표시하지 않게)
- charset: 문자 코드의 종류 설정
- Date: 날짜
- Content-Script-Type: 웹페이지에 쓰인 언어
- X-UA-Compatible: 브라우저 호환성
- subject: 홈페이지 주제 지정
- title: 제목
등등...
시맨틱 태그
의미를 부여한 태그. 시맨틱 태그는 HTML5에서 처음 등장했으며, <header>, <footer>와 같은 태그들이 있다.
시맨틱 태그의 장점
- HTML 문서의 가독성과 유지보수가 쉬워진다.
- 웹 브라우저가 HTML만 보고도 어느 영역인지 쉽게 알 수 있다. 이는 웹 접근성 시각에서도 중요하게 사용된다.
- 검색엔진이 검색을 수행할 때 HTML 내의 태그를 분석할 수 있다. (검색 엔진 최적화)
시맨틱 태그의 종류
<header>, <main>, <section>, <article>, <aside>, <footer>, <hgroup>, <nav>
참고
