HTML
HTML이란?
HTML은 HyperText Markup Language의 약자로 웹 페이지를 만드는 데 사용되는 언어입니다.
- Hypertext(하이퍼텍스트): 웹 페이지를 다른 페이지로 연결하는 링크
- Markup Language(마크업 언어): 문서나 데이터의 구조를 표현하는 언어
그저 데이터를 나열해 놓은 것이 아니라 본문의 제목, 단락, 목록 등과 같이 의미를 포함하며 웹 페이지의 구조를 설명합니다. 구조를 표현하기 위한 방법으로 '태그(Tag)'를 활용합니다.
태그(Tag)
태그는 무언가를 표시하기 위한 꼬리표라는 의미가 있으며 웹 페이지의 구조에 대한 정보를 브라우저에 제공합니다. 웹 브라우저는 웹 서버 또는 로컬 저장소에서 HTML 문서를 수신하고 태그를 분석해 사용자가 볼 수 있는 웹 페이지로 표시합니다.
HTML은 태그들의 집합이며 태그는 요소를 만들 때 사용합니다. 태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어갑니다. 태그 이름은 대소문자를 구분하지 않지만 가독성과 기타 이유로 소문자로 작성하는 것이 좋습니다. 소문자 작성 이유
태그는 일반적으로 여는 태그(Opnening tag)와 닫는 태그(Closing tag)로 이루어지며 닫는 태그는 태그 이름 앞에 / 기호가 붙습니다. 여는 태그와 닫는 태그 사이에는 내용이 위치합니다. 짝을 이루지 않아 내용이 없는 태그도 있습니다. 이를 빈 태그(Empty Tag)라고 합니다.
내용을 포함한 태그 전체를 요소(Element) 라고 합니다.
<p>Text</p><p>: 여는 태그</p>: 닫는 태그Text: 내용
태그 속성(Attributes)
개별 태그의 기능을 확장하고 더 쉽게 관리하기 위해 속성을 사용할 수 있습니다. 속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미합니다. 속성은 이름과 값으로 구성되며 시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현합니다.
<a href="https://developer.mozilla.org/ko/">MDN Web Docs</a>HTML 문서 구조
웹 브라우저는 HTML 문서 구조를 통해 HTML 버전, 문서의 제목, 정보, 내용 등을 파악합니다. HTML 문서는 일반적으로 문서 형식 정의로 시작하여 <html>, <head>, <body> 3개의 영역으로 구성됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<h1>heading</h1>
<p>paragraph</p>
</body>
</html>문서 형식 정의
문서 형식 정의(Document Type Declaration)는 문서가 어떤 유형으로 작성되었는지 브라우저에게 알려줍니다. 웹 브라우저는 문서 형식 선언이 없는 HTML 문서는 쿼크 모드로, 문서 형식 선언이 있는 HTML 문서는 표준 모드로 렌더링합니다.<!DOCTYPE html>은 현재 문서가 HTML5 언어로 작성한 웹 문서를 의미합니다.
쿼크 모드(Quirks mode, 쿽스 모드)는 오래된 웹 브라우저를 위하여 디자인된 웹 페이지의 하위 호환성을 유지하기 위해 W3C나 IETF의 표준을 엄격히 준수하는 표준 모드(Standards Mode)를 대신하여 쓰이는 웹 브라우저 기술을 가리킨다. 같은 코드라도 웹 브라우저마다 서로 다르게 해석하므로 전혀 다른 결과물을 보여주게 된다.
쿼크 모드 - 위키백과, 우리 모두의 백과사전
<html> 태그
<html> 태그는 HTML 파일의 시작과 끝을 표시하며 작성된 문서가 HTML을 사용한 문서임을 나타냅니다. HTML 페이지의 루트 요소로 <html> ~ </html> 사이에 모든 콘텐츠가 작성됩니다.
lang 속성은 페이지의 언어에 대한 정보를 제공합니다. 이는 웹 페이지의 텍스트 내용을 올바르게 표시하도록, 검색 엔진이 다른 국가의 사용자에게 올바른 검색 결과를 표시하는데 도움을 줍니다.
기본 언어 선언이 중요한 이유는 스크린리더가 선언된 언어에 해당하는 TTS로 자동으로 전환함으로 콘텐츠를 자연스럽게 출력하도록 하기 위함입니다.
<head> 태그
웹 브라우저 화면에 표시되지 않고 메타데이터(metadata) 집합을 정의합니다. 검색 결과에 나타날 키워드와 페이지 설명, 외부 스타일 시트 파일 연결, 문자 집합 선언 등이 포함됩니다.
메타데이터(metadata)는 데이터(data)에 대한 데이터이다. 이렇게 흔히들 간단히 정의하지만 엄격하게는, 캐런 코일(Karen Coyle)에 의하면 '어떤 목적을 가지고 만들어진 데이터(Constructed data with a purpose)'라고도 정의한다.
메타데이터 - 위키백과, 우리 모두의 백과사전
<meta> 태그는 메타데이터를 정의할 때 사용합니다. 다양한 종류의 메타데이터를 제공할 때 사용되며, 브라우저와 검색 엔진이 이를 활용합니다.
<body> 태그
실제 웹 브라우저에 표시되는 모든 콘텐츠가 <body> 내에 작성됩니다.
Reference
