HTML
HTML Element 구성
<h1>Hello World</h1><h1>Hello World</h1> : Element
<h1> : start tag
Hello World : Content
</h1> : end tag
Void Element
- start tag :
<input> - self-closing :
<input />
HTML Element 분류
인라인 element와 블록 element
HTML4 버전에서의 분류이다.
콘텐츠 모델 ( Contents Model )
HTML5 버전에서의 분류이다.
- Metadata Content
- Flow Content
- Section Content
- Phrasing Content
- Heading Content
- Embeded Content
- Interactive Content
- Palpable content
- Form-associated content
HTML 문서 골격 만들기
-
<!DOCTYPE html>: 모던 브라우저에서는 명시적으로 사용하든 안하든 브라우저가 알아서 잘 인식하지만, IE9 이전 버전은 DOCTYPE을 명시하지 않으면 HTML 문서를 인식하지 못한다. -
<html>: 문서의 루트지점을 명시하는 태그이다. lang 속성은 필수로 사용하자. 다국어 지원 사이트라면 lang 속성도 같이 변경해야 한다. -
<head>: head 태그는 문서의 제목과 인코딩 형식 등을 정의한다.<title>: 문서의 제목, 사용자 북마크나 검색엔진의 구분기준으로 사용된다.<meta>: 주로 기계가 읽고 이해하는 정보이다.- charset 속성 : 문서의 인코딩 방식을 지정
<meta charset="UTF-8" /> - http-equiv 속성 : http-equiv 속성과 content 속성을 이용해 IE 렌더링 사양을 조정할 수 있다. 아래의 코드는 렌더링시 최신 Edge 모드를 사용한다는 의미이다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
- charset 속성 : 문서의 인코딩 방식을 지정
-
<body>: 본문
시맨틱 ( Semantic )
-
<h1>~<h6>: 각 섹션의 제목을 나타낸다. -
<header>: 제목이나 대표 이미지가 들어간다.
<body>의 하위로 작성되면 웹 페이지 전체의 헤더를 의미하고, Section Content의 하위로 작성되면 해당영역의 헤더를 의미한다.
일반적으로<h1>~<h6>나 로고를 포함한다. -
<footer>:<header>와 마찬가지로 전체문서 또는 Section Content의 바닥글로 쓰인다.
일반적으로 작성자, 관련 링크, 라이센스, Index 등의 데이터가 들어간다. -
<main>: 페이지의 콘텐츠 영역이다.
<body>의 아래에 추가해야 하며 페이지당 한 번만 사용된다. -
<article>: 하나의 의미있는 콘텐츠 블록이다.
단일 게시물을 나타낼때 사용한다.
이 엘리먼트의 내용은 독립적으로 배포하거나 재사용된다. -
<section>: 페이지의 단일 부분을 그룹화한다.
단순 스타일링을 위해서라면<section>보다는<div>를 사용한다. -
<aside>: 기본 콘텐츠와는 직접관련이 없지만 간접적으로 관련된 추가 정보를 나타낸다.
일반적으로<nav>를 포함하는 네이게이션이나 광고, 인용처럼 분리된 콘텐츠를 나타낼때 사용한다. -
<nav>: 다른 페이지나 특정 영역으로 이동시키는 링크를 나타낸다.
SEO ( Search Engine Optimization )
-
시맨틱하게 HTML을 작성한다.
-
<title>을 적절히 작성한다.
검색시 해당 사이트의 이름을 나타내므로 브랜드명이나 메인 키워드로 작성하는게 유리하다. -
<meta name="description" content="두 세문장 정도의 설명" /> -
인코딩을 직접 명시하면 여러 종류의 브라우저에서 통일된 인코딩방식으로 노출시킨다.
<meta charset="UTF-8" /> -
open graph, twitter 태그를 사용해 외부 사용자를 유인한다.
트위터는 자체 twitter 프로토콜을 가진다.<meta property="og:title" content="페이지 이름" /> <meta property="og:description" content="한 두줄 설명" />
