•
브라우저가 HTML5 문서임을 인식하게 해준다.
<!DOCTYPE html>
HTML
복사
1. <html>
속성 | 설명 |
lang | 검색 엔진이 웹 페이지를 탐색할 때 해당 웹 페이지가 어떠한 언어로 만들어져 있는지 쉽게 인식. |
2. <head>
하위에 넣을 수 있는 태그 | 설명 |
웹 페이지에 추가 정보를 전달 | |
title | 웹 페이지의 제목 |
script | 웹 페이지에 스크립트 추가 |
link | 웹 페이지에 다른 파일 추가 |
style | 웹 페이지에 스타일시트 추가 |
base | 웹 페이지의 기본 경로 지정 |
3. 글자 형태 태그
태그 | 설명 |
b | 굵은 글자 |
i | 기울어진 글자 |
small | 작은 글자 |
sub | 아래에 달라 붙는 글자 |
sup | 위에 달라 붙는 글자 |
ins | 밑줄 글자 |
del | 가운데 줄이 그어진 글자 |
4. 기본 목록 태그들
태그 | 설명 |
ul | 순서가 없는 목록 |
ol | 순서가 있는 목록 |
li | 목록 요소 |
5. 정의 목록 태그
•
특정 용어와 그 정의를 표현할 때 사용
태그 | 설명 |
dl (definition list) | 정의 목록 |
dt (definition term) | 정의 용어 |
dd (definition description) | 정의 설명 |
6. 테이블 태그
<table> 속성 | 설명 |
border | 표의 테두리 두께 |
<table> 하위에 사용할 수 있는 태그 | 설명 |
tr | 표 내부의 행 태그 |
th | 행 내부의 제목 셀 |
td | 행 내부의 일반 셀 |
caption | … |
colgroup | … |
thead | … |
tbody | … |
<th>, <td> 속성 | 설명 |
rowspan | 셀의 높이 지정 |
colspan | 셀의 너비 지정 |
7. 이미지 태그
•
placeholder.it을 이용해 미리 이미지를 지정한다.
8. 오디오 태그
•
브라우저마다 지원하는 확장자 형식이 달라서 실행이 되지 않을 수도 있다.
8-1. <source> (이미지, 오디오, 비디오 관련)
<source> 속성 이름 | 설명 |
src | <audio>, <video>가 부모인 경우만 허용된다. <picture>는 허용되지 않음. |
type | 이미지나 미디어 타입을 지정해준다. 작성하지 않아도 되지만 브라우저가 파일을 확인하는 과정이 들어가므로 트래픽이 낭비된다. 따라서 꼭 지정해주기. |
srcset | <picture>가 부모인 경우에 허용. <audio>, <video>는 허용되지 않는다. 브라우저의 뷰포트 너비나 디스플레이 해상도에 대한 반응형 이미지 소스 지정을 위한 속성. |
sizes | <picture>가 부모인 경우만 허용. srcset을 통해 width 디스크립터가 제공이 되었을 경우에만 영향을 준다. 브라우저의 뷰포트 너비와 srcset 속성으로 지정한 반응형 이미지 너비와의 관계를 지정. |
media | 미디어 쿼리를 지정한다. |
8-2. srcset 속성과 sizes 속성으로 반응형 이미지를 구현
•
img의 srcset은 브라우저의 뷰포트 너비나 디스플레이 해상도에 대한 반응형 이미지 소스를 지정하기 위함.
•
일반적으로 같은 이미지를 뷰포트(w)나 해상도(x)에 따라 적절한 이미지를 선택하는 구조. 브라우저가 DPR에 맞는 이미지를 자동 선택한다.
•
적절한 이미지를 자동 선택함으로써 불필요하게 큰 이미지 로드를 방지한다.
•
화면 크기 뿐만 아니라 이미지 포맷 또는 완전히 다른 이미지도 제공할 때 사용한다.
•
WebP를 지원하는 브라우저에서는 해당 포맷을 지원함으로 최적화를 해준다.
•
즉, 기존의 img에서 화면 크기와 해상도를 설정하는 기능과 포맷까지 설정할 수 있으므로 picture를 주로 쓰면 된다.
•
SEO를 위해서 fallback 용도의 img 태그는 넣어준다.
추가 레퍼런스
9. 비디오 태그
<video> 속성 이름 | 설명 |
src | <audio>, <video>가 부모인 경우만 허용된다. <picture>는 허용되지 않음. |
poster | 사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력. |
preload | <picture>가 부모인 경우에 허용. <audio>, <video>는 허용되지 않는다. 브라우저의 뷰포트 너비나 디스플레이 해상도에 대한 반응형 이미지 소스 지정을 위한 속성. |
autoplay | <picture>가 부모인 경우만 허용. srcset을 통해 width 디스크립터가 제공이 되었을 경우에만 영향을 준다. 브라우저의 뷰포트 너비와 srcset 속성으로 지정한 반응형 이미지 너비와의 관계를 지정. |
loop | 비디오를 반복할지 지정 |
controls | 비디오 재생 도구를 출력할지 지정 |
width | 요소의 너비 지정 |
height | 요소의 높이 지정 |
crossorigin | |
bufferd | |
played |
10. 입력 양식 태그
10-1. <form>
10-2. <input>
<input> type 속성 | 설명 |
button | 버튼을 생성 |
checkbox | 체크 박스를 생성 |
file | 파일 입력 양식을 생성 |
hidden | x |
image | 이미지 형태 생성 |
password | 비밀번호 입력 양식 생성 |
reset | 초기화 버튼 생성 |
submit | 제출 버튼 생성 |
text | 글자 입력 양식 생성 |
10-3. <textarea>
<textarea> 속성 | 설명 |
cols | 태그의 너비를 지정 |
rows | 태그의 높이를 지정 |
autocapitalize | 입력된 텍스트를 자동으로 대문자로 표시할지 여부와, 표시하는 경우 어떤 방식으로 표시할지 제어 |
autocomplete | • off: 사용자는 매번 사용할 때 이 필드에 값을 명시적으로 입력해야 하며, 그렇지 않으면 문서에서 자체적인 자동 완성 방법을 제공. 브라우저는 입력 내용을 자동으로 완성하지 않는다.
• on: 브라우저는 사용자가 이전에 사용했을 때 입력한 값을 기반으로 자동으로 값을 완성할 수 있다. |
autocorrect | 사용자가 이것을 편집하는 동안 자동 철자 교정 및 텍스트 처리를 활성화할지 여부 |
autofocus | 페이지가 로드될 때 폼 컨트롤에 입력 포커스가 있어야 함을 지정 |
min(max)length | 최소(최대) 글자 수 지정 |
10-4. <select>
•
선택 양식을 생성하는 요소
<select> 속성 | 설명 |
multiple | 여러 개의 옵션 선택 가능 |
11. 입력 양식을 설명하는 태그
•
<fieldset> 하위에 사용할 수 있는 태그 | 설명 |
<legend> | <legend> 태그는 그룹의 캡션 역할(간단한 제목이나 설명)을 하며, 스크린 리더 사용자에게 그룹의 내용을 알려주는 중요한 요소. 웹 접근성을 고려할 때 반드시 사용할 것. |
12. 공간 분할 태그
태그 | 설명 |
div | block 형식으로 공간을 분할 |
span | inline 형식으로 공간을 분할 |
12-1. block 형식과 inline 형식의 태그
13. 시멘틱
HTML5는 시멘틱 웹 페이지태그라고 한다. 기계적인 검색 엔진은 태그가 어떠한 기능을 분별하기 어렵기 때문에, 이러한 문제를 해소하기 위해 태그에 의미를 부여하기 시작했다.
사이트에서 살펴보면 <details> 라는 요소가 있는데 이는 open 속성이 true가 되어야지 요소의 정보가 표시된다. 이런 태그들을 잘 활용하는게 시멘틱하다고 할 수 있겠다. 하지만 열기와 닫기 사이의 전환을 애니메이션화 할 수 없는 문제들이 있어서 요구사항에 맞게 HTML 설계가 필요.
Reference
HTML5+CSS3 바이블