HTML 구조와 컨텐츠 모델

멤오장·2023년 1월 26일
0

이론 정리

목록 보기
2/3

면접 망하고 다시 정리해보는 이론 #2

💜

HTML 구조

<Doctype>

문서 유형을 지정하는 선언
페이지의 HTML 버전이 무엇인지 웹 브라우저에게 알려주는 선언문
대소문자 구분하지 않음

HTML 5
<!DOCTYPE html>


이전 버전

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Quirks Mode

  • Doctype 없는 경우
  • Doctype에 FSI가 기술되어 있지 않은 경우

IE에서는 box model 잘못 해석 width에 padding과 border를 포함

IE 최신 표준 모드 렌더링
<meta http-equiv="X-UA-Compatible" content="IE=edge">




<html>

  • 문서의 루트 요소. 문서 내용이 시작되고 끝나는 것을 표시함
  • lang 속성을 사용해 문서에서 사용할 언어 지정

국가별 언어 코드는 ISO 639-1 표준

<html lang="ko">
<html lang="en">
<html lang="fr">

언어를 지정하는 이유가 뭔가요?
스크린 리더기에서 문서를 읽어줄 때 명시된 언어에 맞춰 읽어줌




브라우저가 알아야 할 정보를 입력하는 곳

<title> 문서의 제목

브라우저의 제목 표시줄이나 페이지 탭의 제목, 즐겨찾기 등록 시 이름으로 사용됨

웹 접근성 지침에 페이지마다 제목을 제공하는 지 여부를 검사하는 항목이 있기 때문에 꼭 사용
페이지 내용을 짐작할 수 있는 주요 단어로 (특수기호X 긴문장x)

<meta> 문서와 관련된 정보를 지정

문자셋
<meta charset="UTF-8">

검색 엔진을 위한 키워드
<meta name="keyword" content="검색 엔진을 위한 키워드, 키워드2">

문서 작성에 사용한 저작 도구 지정
<meta name="generator" content="문서 생성에 사용되는 소프트웨어 패키지 중 하나 명시">

웹 페이지에 대한 설명 요약
<meta name="description" content="웹 페이지에 대한 설명 요약">

문서의 저자
<meta name="author" content="문서의 저자">

뷰포트 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">

문서의 인코딩 방식 명시
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

우선적으로 적용할 스타일시트 명시
<meta http-equiv="default-type" content="동일 문서에 존재하는 link 혹은 style 요소의 title">

해당 문서를 새로고침 할 시간 명시
<meta http-equiv="refresh" content="30;url=http://www.리다이렉트">




💜

HTML5

Outline

HTML5는 눈에 보이지 않는 구조가 자동으로 생겨난다. 암묵적인 구조 생성

Sectioning Root

독립적인 개요를 생성
자손 섹셔닝 루트를 개요로 취급하지 않음 outline에 영향을 주지 않는다

  • body
  • blockquote
  • details
  • dialog
  • fieldset
  • figure
  • td

Sectioning Contents

명시적 개요 생성
헤딩과 함께 사용하면 헤딩 수준이 자동으로 바뀐다

  • section
  • article
  • nav
  • aside

Contents Model

html5는 특성에 따라 분류한다 (이전에는 inline / block 두 가지 요소로 구분)

Metadata

  • link
  • meta
  • noscript
  • script
  • style
  • title

Flow

body 안에서 사용되는 대부분의 엘리먼트

Sectioning

  • section
  • article
  • nav
  • aside

Heading

  • h1~6

Phrasing

  • strong
  • span
  • a
  • br

Embedded

  • audio
  • canvas
  • embed
  • iframe
  • img
  • svg
  • video

Interactive

  • a
  • button
  • label
  • select
  • textarea
  • input
profile
일단 적기

0개의 댓글