HTML 개요
HTML 개요
HTML이란?
HTML 은 HyperText Markup Language의 약자입니다.
웹페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됩니다.
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다.
HTML 태그(tag)
HTML 태그는 태그 이름을 꺾쇠 괄호(<>)로 감싸서 표현합니다.
시작 태그는 태그이름을 <태그이름> 표현, 종료 태그는 </태그이름>로 표현합니다.
문법
<태그이름> ~ </태그이름>HTML 태그는 보통 시작 태그(Start Tag, Opening Tag)와 종료 태그(End Tag, Closing Tag)의 한 쌍으로 구성됩니다.
종료 태그는 시작 태그와 전부 똑같지만, 태그 이름 앞에 슬래시(/)가 존재합니다.
태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 존재합니다.
종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(Empty Tag)라고 합니다.
ex)
<img>, <br>, <hr>
HTML 버전
| 버전 | 년도 | DOCTYPE 및 설명 |
| HTML 1.0 | 1991 | 팀 버나스리(Tim Berners-Lee)가 발표한 최초의 HTML |
| HTML 2.0 | 1995 | 국제 표준으로 제정된 최초의 HTML |
| HTML 3.2 | 1997 | W3C에 의해 제정된 최초의 HTML |
| HTML 4.01 | 1999 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| XHTML 1.0 | 2000 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| HTML 5 | 2014 | <!DOCTYPE html> |
HTML 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>웹페이지의 제목</title>
</head>
<body>
<h1>제목1</h1>
<p>단락</p>
</body>
</html><!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시
<html lang="en"> : HTML 문서의 루트(root) 요소를 정의
<head> : HTML 문서의 메타데이터(metadata)를 정의
- 메타데이터(metadata)란 HTML 문서에 대한 정보로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.
1. 웹 브라우저의 툴바(toolbar)에 표시됩니다.
2. 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.
3. 검색 엔진의 결과 페이지에 제목으로 표시됩니다.
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.
<h1> : 제목(heading)을 나타냅니다.
<p> : 단락을 나타냅니다.
HTML 요소 구조
HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공합니다. 또한 HTMl 요소는 시작 태그로 시작해서 종료 태그로 끝납니다.
속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며, 속성 이름과 속성값(value)으로 표현됩니다.
※ 속성 이름은 소문자로 작성
HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 있습니다. 하지만 W3C에서는 속성 이름을 사용할 때 될 수 있으면 소문자로 작성하도록 권장하고 있습니다. 또한, XHTML에서는 속성 이름을 더욱 엄격하게 소문자로만 사용해야 합니다.
※ 속성값은 따옴표로 감싸기
HTML5 표준에서는 속성값에 따옴표 사용을 강제하지 않습니다. 하지만 속성값을 따옴표로 감싸지 않으면, 값에 띄어쓰기가 들어가게 되면 정확한 값을 저장할 수 없습니다.
출처: TCPSCHOOL.com
'IT > Web' 카테고리의 다른 글
| HTML 기본 요소 - Style, Color, Background, Link, state, img, list, table (0) | 2020.01.17 |
|---|---|
| HTML 텍스트 요소 (0) | 2020.01.15 |
| HTML5 & CSS3 - 이미지 스프라이트 기법 (1) | 2019.07.25 |
| HTML5 & CSS3 - 웹표준 이미지의 대체텍스트 넣기 IR 기법 (0) | 2019.07.25 |
| HTML5 & CSS3 - 웹접근성 스킵 메뉴 만들기 (0) | 2019.07.24 |
댓글