티스토리 뷰
HTML(Hyper Text Markup Language)은 웹 페이지의 표준 마크업 언어이다. HTML의 요소가 웹 페이지를 구성하는 요소가 된다. HTML의 요소는 '<>' 태그로 표시된다.
Hyper Text : 문서와 문서가 링크로 연결된
Markup : 태그로 이루어진
Language : 언어
HTML 구성요소
HTML 요소는 사이에 콘텐츠가 있는 열린 태그와 닫힌 태그이다. 닫힌 태그는 태그명 앞에 '/'가 붙는다. 닫힌 태그가 필요 없는 경우 '<태그명 />'의 형태로 나타낸다.
<h1>헤딩 태그</h1>
<strong>강조할 텍스트</strong>
<img src="../image.jpg" />
| 열린 태그 | 콘텐츠 | 닫힌 태그 |
| <h1> | 헤딩 태그 | </h1> |
| <strong> | 강조할 텍스트 | </strong> |
HTML 속성
HTML 요소는 속성을 가질 수 있으며, 태그의 부가적인 정보가 담긴다. '속성명="속성값"'의 형태로 나타낸다.
<a href="www.tistory.com" target="_blank">티스토리로 이동하기</a>
| 속성명 | 속성값 |
| href | www.tistory.com |
| target | _blank |
HTML 기본형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>페이지 타이틀</title>
</head>
<body>
<h1>헤딩태그</h1>
</body>
</html>
head 태그 사이에는 문서를 정의하는 데이터가 위치하며, body 태그 사이에 있는 콘텐츠가 웹 페이지에 표시된다.
HTML5란 무엇인가?
HTML은 수년에 걸쳐 여러 버전이 나왔는데, 그 다섯 번째 버전이 HTML5이다. 과거에는 HTML만으로 웹 서비스 구성이 불가하였지만 HTML5가 출시되면서 서버와의 통신이 가능해졌고, 부가 기능을 통해 ActiveX와 같은 외부 플러그인을 사용하지 않더라도 웹 서비스의 제공을 할 수 있게 됐다.
HTML 발전 순서
| 1991 | HTML |
| 1994 | HTML2 |
| 1996 | CSS1, JavaScript |
| 1997 | HTML4 |
| 1998 | XML, CSS2 |
| 2000 | XHTML1 |
| 2002 | Tableless Web Design |
| 2005 | AJAX |
| 2009 | HTML5 |
HTML5 등장 배경
HTML5가 등장하기 이전에는 HTML만으로 완벽한 표현이 불가능했다. 때문에 ActiveX 등의 외부 기술에 의존할 수밖에 없었다. 이때 필요한 태그를 사용자가 직접 정의할 수 있는 XML(eXtensible Markup Language)이 등장하였다. HTML이 고정된 태그만 사용이 가능하다면, XML은 사용자가 직접 태그를 작성할 수 있게 하여 HTLM의 확장성을 강조하였다.
나중에는 HTML과 XML이 결합된 XHTML이 등장하면서 W3C는 HTML의 사용과 개발을 중단하고 XHTML을 추진하려 하였다. 하지만 기존 HTML에 익숙한 개발자와 브라우저 공급자들은 이에 반대하였다. Apple, Opera, Mozilla는 WHATWG라는 그룹을 만들었고 독립적으로 HTML을 개발시키려 하였다. 결국 W3C는 WHATWG를 정식 W3C워킹그룹으로 인정하였다. W3C가 XHTML의 개발을 중단하고 HTML을 발전시키면서 나온 버전이 HTML5이다.
HTML5 원칙
호환성
콘텐츠의 호환성 : HTML5 이전 버전으로 제작한 콘텐츠를 문제없이 이용할 수 있어야 한다.
이전 브라우저와의 호환성 : HTML5가 지원되지 않는 이전 브라우저에서도 이용할 수 있어야 한다.
기능의 재사용 : 서로 다른 브라우저에서 구현해놓은 기능들을 HTML5에서 이용할 수 있어야 한다.
이용 방법의 호환성 : HTML 태그를 동일한 사용법으로 사용할 수 있어야 한다.
혁신보다는 발전의 우선 : 새로운 마크업 언어를 구현하는 것보다는 기존의 HTML을 발전시키는 게 우선이다.
실용성
W3C에서 말하는 이상적인 마크업보다 실무에서 필요로 하는 것이 우선되어야 한다.
상호운영성
HTML5를 적용한 브라우저라면 동일하게 작동해야 한다.
보편적 접근성
콘텐츠에 누구나 접근할 수 있어야 한다.
HTML4와 HTML5의 차이점
1. Syntax(구문)
- DOCTYPE 선언이 더 간결해졌다.
- Encoding 선언이 더 간결해졌다.
- 수식기술언어(MathML), 그래픽 언어(SVG) 등의 사용이 가능해졌다.
- HTML5는 TAG의 대소문자를 구분하지 않는다. (가독성을 위해 소문자로 작성 권장)
2. Language(언어)
- Semantic Element가 추가되었다. (header, footer, nav, section, article 등)
- 일부 Element가 사라졌다. (css로 처리할 수 있는 요소, Frame 관련 요소, 거의 사용되지 않는 요소 등)
3. API
- Video/Audio API : video, audio 요소를 재생하는 데 사용된다.
- Offline Web Application : 오프라인을 지원하기 위한 API
- Drag&Drop API
- 그 외 API
'HTML' 카테고리의 다른 글
| <!DOCTYPE> 선언 이유와 예시 코드 (0) | 2023.07.03 |
|---|---|
| 검색 엔진 최적화 SEO란? SEO 진단 / 가이드 / 중요성 (0) | 2021.07.06 |
| html DOCTYPE 선언 이유 필요성 (0) | 2021.06.25 |
| [코딩기초] 이미지 형식 jpg, gif, png 차이점, 장단점 (0) | 2021.06.25 |
| [코딩기초] 웹표준과 웹접근성 정의 / 가이드 (0) | 2021.06.25 |