Living standard는 직역하면 '살아있는 표준'이다.
간단하게 설명하면 HTML 문법 등을 규정한 표준이라고 생각하면 된다.
문법
- HTML 요소는 HTML 태그와 속성으로 구성됨
- 보통 여는 태그와 닫는 태그 한쌍으로 구성됨
- 일부 요소는 여는 태그로만 구성됨
- 속성은 항상 여는 태그에 삽입
- 시맨틱한 HTML : 대부분의 요소에는 고유한 의미가 있다. 이 의미는 사람에게 필요로 하기보다는 기계가 이해할 수 있는 언어로 HTML을 코딩한다는데 목적이 있다. SEO, 접근성 등에 도움을 줌
1. 여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성됩니다.
2. 닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/) 있는것을 제외하면 여는 태그(opening tag)와 같 . 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치한다.
3. 내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트이다.
4. 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고한다.
document element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>-
<!DOCTYPE html>: 문서 형식. DTD (Document type Definition) 라고 부르며 문서의 타입에 대한 정보를 제공함. 만약 제거하면 브라우저는 쿼크 모드(quirks mode : 하위 호환성 모드)로 html을 랜더링하게 된다. 쿼크 모드에서는 브라우저마다 구현 방식이 조금씩 다르기 때문에 다르게 동작할 가능성이 있으므로 반드시 문서 최상단에 선언을 해야한다. -
<html></html>:<html>요소. 이 요소는 전체 페이지의 콘텐츠를 포함하며, 기본 요소로도 알려져 있다.즉, 문서의 최상위 요소입니다. lang 속성을 통해 문서의 주 언어가 무엇인지 설정 할 수 있다. 주 언어 설정은 검색엔진과 스크린 리더의 작동에 영향을 미치게 된다. -
<head></head>:<head>요소. 이 요소는 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있다.
-
<meta charset="utf-8">: 이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며 예시에서 지정한 UTF-8에는 전세계에서 사용되는 언어에 대한 대부분의 문자가 포함된다. 이 설정을 사용하면 페이지에 포함 된 모든 텍스트 내용을 처리 할 수 있다. -
<title></title>:<title>요소. 이 요소를 사용하면 페이지 제목이 설정되며 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용된다. 페이지 제목은 페이지가 책갈피 될 때 페이지를 설명하는 데에도 사용된다. 반드시 한번만 사용되어야 합니다. -
<body></body>:<body>요소. 여기에는 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함된다.
metadata
charset: 문서의 문자 인코딩 상태를 의미한다. 보통 UTF-8 로 설정하여 전 세계 모든 언어를 지원하도록 한다.name="author": 페이지를 작성한 개발자의 이름name="description": 페이지에 대한 설명 정보
검색엔진이 사용자에게 결과 화면을 출력할 때 중요한 고려 요소이다.name="viewport": 모바일 장치에서 사용자 화면의 사이즈에 대한 값을 설정한다. 필수는 아니지만 스마트폰이나 태블릿 같은 모바일 기기에서도 많은 접속이 이뤄지는 요즘은 반드시 넣어주는게 좋음.http-equiv="X-UA-Compatible”: 프라그마 지시문(pragma directive : 컴파일러에게 특정 기능을 지정)이라고 한다. 브라우저에 어떤 행동을 지시하려는 목적으로 사용한다.X-UA-Compatible속성값은 IE브라우저에서 페이지를 어떠한 형식으로 랜더링할지 지정할 수 있으며content='IE=edge'는 IE8 버전 이상에서 항상 표준모드로 랜더링 되도록 한다.
전체태그 중 주의깊게 볼만한 태그
The document element
- html
Document metadata
- head
- title - meta
- link
- style
Sections - body - article - section
- nav
- aside
- h1, h2, h3, h4, h5, h6
- hgroup
- header
- footer
- address
Grouping content - p
- blockquote
- ol
- ul
- menu
- li
- dl
- dt
- dd
- figure
- figcaption
- main
- div
Text-level semantics - a
- em
- strong
- cite
- q
- dfn
- abbr
- code
- var
- span
- br
- wbr
Embedded content
- img
- picture
- source
- iframe
- video
- audio
- track
- Tabular data
- table
- caption
- colgroup
- col
- tbody
- thead
- tfoot
- tr
- td
- th
Forms
- form
- fieldset
- legend
- label
- input
- button
- textarea
- select
- option
- Interactive elements
- details
- summary
- dialog
