[HTML] HTML 이란?
HTML 기초
HTML의 역사와 발전
HTML(Hypertext Markup Language) 이란 웹페이지를 만들기 위한 표준 마크업 언어이다. 이 언어는 “Tim Berners-Lee”는 CERN에서 정보 공유를 용이하게 하기 위해 HTML을 개발하기 시작했다. 초기 버전은 상당히 간단한 구조로 하이퍼링크와 기본적인 문서 구조만을 정의하는데 중점을 뒀다.
1995년 HTML 2.0이 공식 표준으로 채택되었고, 이 버전에서는 폼, 테이블 등이 추가 되었다. 이후 3.2 와 4.0으로 발전하며 스타일시트(CSS), 스크립트, 프레임 등을 지원하며 더욱 복잡한 웹 페이지 구성이 가능해 졌다.
2004년, 웹 개발자들과 브라우저 제조사들은 “Wen Hypertext Application Technology Working Group”를 결성하고, HTML의 다음 버전을 개발하기 시작했다. 이것이 HTML5의 시작이었다.
HTML5
오늘날, HTML은 웹의 핵심 구성 요소로서 계속해서 발전하고 있다. 새로운 기능과 표준이 지속적으로 추가되면서, 웹 경험을 풍부하고 다양하게 만드는데 기여하고 있다. HTML5의 주요 특징은 다음과 같다.
- 멀티미디어 지원 : ‘<video>’, ‘<audio>’ 태그를 도입하여 웹 페이지 내에서 직접 비디오와 오디오 콘텐츠를 재생할 수 있게 되었다.
- 그래픽과 효과
- 로컬 저장소 : 로컬 스토리지와 세션 스토리지를 제공하여 브라우저에 데이터를 저장할 수 있게 한다. 이는 쿠키보다 더 큰 용량의 데이터 저장과 더 효율적인 데이터 관리를 가능하게 한다.
- 오프라인 애플리케이션
- 폼과 입력 타입
- 웹 접근성
기본 구조와 문법
HTML 문서는 여러 요소(Element)들로 구성되며, 이들 요소는 태그를 사용하여 표시된다.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!-- 메타 정보, 외부 스타일 시트 및 스크립트 참조 등이 여기에 포함됩니다 -->
</head>
<body>
<!-- 웹 페이지의 실제 내용이 여기에 포함됩니다 -->
</body>
</html>
태그와 속성 이해하기
- 태그 HTML 요소는 보통 여는 태그 (“<tag>”) 와 닫는 태그(“<tag>“)로 이루어진다.
- Self-closing tag 일부 요소는 닫는 태그없이 자기 자신을 닫을 수 있다. 대표적으로 이미지(“<img />”) 나 줄바꿈(“<br/>”) 태그가 이에 해당한다.
- 속성(Attributes) 태그는 속성을 가질 수 있다. 이 속성들은 해당 요소에 추가적인 정보를 제공한다. “
<a href="https://example.com"\>Link</a\>” 에서 “href”는 속성이다.
시맨틱 태그(semantic tag)
콘텐츠를 보다 의미있게 전달하고 문서 구조를 효율적으로 구분하기 위해 만들어진 개념으로, 시멘틱 태그는 사람이 이해하기 쉽게 이름만 보고 역할이나 위치를 알 수 있게 만든 태그이다.
- <header> 페이지나 섹션의 헤더 영역을 구분한다. 로고, 제목, 네비게이션 링크 등을 포함할 수 있다.
- <nav> 네비게이션 링크를 위한 태그이다. (내부의 다른 영역이나 외부 연결 링크영역을 구분) 주로 메뉴, 목차, 색인 등을 표시하는 데 사용한다.
- <section> 문서의 독립적인 구획을 나타내며 논리적으로 관련 있는 내용 영역을 구분한다.
- <article> 독립적으로 구분되거나 재사용 가능한 구역을 정의한다. 예시로 블로그 포스트나 뉴스 기사 등이 이에 해당한다.
- <aside> 페이지의 주 내용과 간접적으로 관련된 부가적인 내용을 담는 구역이다. 사이드바, 콜아웃 박스등이 해당
- <footer> 페이지나 섹션의 바닥들을 나타낸다. 저장권 정보, 연락처, 사이트맵, 백 링크 등을 포함할 수 있다.
이와 같은 시맨틱 태그는 접근성을 향상 시키며 검색 엔진 최적화(SEO) 개선을 할 수 있다.
글로벌 속성
일반적으로 태그에 따라 사용할 수 있는 속성이 다르다. 하지만 일부 속성은 태그의 종류와 상관없이 모든 태그에서 사용할 수 있다. 이를 글로벌 속성이라 한다.
- class 요소를 분류하기 위한 속성으로 한 요소에 여러 클래스를 지정할 수 있다.
- id 요소에 고유한 식별자를 부여한다. ‘id’값은 문서 내에서 유일해야 한다.
- style 요소에 인라인 CSS 스타일을 직접 적용할 때 사용한다. 일반적으로 외부 스타일 시트를 사용하는 것을 권장하지만, 특정 요소에 직접 스타일을 적용하고 싶을 때 사용한다.
- title 요소에 대한 추가 정보를 제공하는 텍스트를 지정한다.
- lang 요소의 텍스트 내용의 언어를 지정한다. SEO 와 접근성을 향상시키는대 도움이 된다.
- data-* 사용자 정의 데이터 속성을 설정할 때 사용한다. ‘data-‘뒤에 원하는 이름을 붙여 데이터를 저장하고, JavaScript를 통해 이 데이터를 읽어올 수 있다.