HTML (HyperText Markup Language)
하이퍼텍스트 마크업 랭귀지, 흔히 생각하는 코딩을 하기 위한 프로그래밍 언어는 아니고 우리가 매일 접하는 인터넷 사이트의 웹페이지가 어떻게 구성되어 있는지 브라우저가 읽을 수 있도록 정리된 언어이다.
정리하면 인터넷 사이트는 HTML로 작성된 문서를 하나의 책처럼 묶어놓은 형태이며, 브라우저는 그 문서를 우리들이 이해할 수 있는 방식으로 번역해 주는 도구라고 생각하면 된다.
HTML은 element(요소)들의 노드 혹은 트리구조를 가지며 상속관계로 표현되어 나타나게 되며 이 요소라는 것들은 흔히 <태그>라는 표현을 사용한다.
<!doctype html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>hello world!</title>
</head>
<body>
<h1>HTML/CSS</h1>
<ul>
<li><a href="./src/html/01-basic-structure.html">HTML 기본 구조</a></li>
</ul>
</body>
</html>
<!doctype html>
모든 HTML문서의 시작 부분에 작성되며 해당 문서의 규격을 정의한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
현재 HTML5로 표준화되어 사용하고 있지만 HTML5가 등장하기 전에는 브라우저마다 표준이 달라 위의 2줄처럼 길게 정의를 내려줘야 했다.
<html>
문서 전체를 감싸는 요소로써 <head>와 <body>를 포함하고 HTML의 루트에 해당된다. HTML을 나타내는 요소는 모두 이 안에서 표현되어야 한다.
html요소 안의 lang 속성은 문서의 기본 언어를 정의하며 lang="ko-KR" 같은 형식, "언어코드-지역코드"로 속성을 정의한다.
생략해도 암묵적으로 표현되기 때문에 보는 데에는 지장은 없지만, 문서가 열람되는 언어와 지역을 정의함으로써 스크린리더, 검색엔진, 번역서비스를 이용할 수 있기 때문에 요즘 중요하게 여겨지는 웹접근성과 웹표준성을 충족시키므로 작성하는 것을 권장한다.
<head>
HTML문서의 머리글 역할을 한다. 해당사이트의 정보와 설정이 담긴 메타데이터를 정의하는 곳이다. 해당 태그에 작성하는 내용은 사용자가 브라우저를 통해 볼 수는 없지만 <meta> <title> <link> <script> 등의 태그를 작성해서 검색엔진이 해당 문서의 설정을 파악할 수 있게 한다.
<meta>
해당문서의 정보를 제공하는 역할을 한다. charset="UTF-8" 속성은 문자 인코딩을 설정하며 한글, 영어 등 대부분의 언어를 표현할 수 있게 하고 글자 깨짐을 방지한다. 해당 태그를 여러 개로 나눠 쓰는 이유는 하나의 태그마다 속성의 역할이 다르며 이를 하나의 태그 안에 작성할 경우 브라우저가 제대로 인식하지 못해 충돌을 일으키기도 한다. 그 외에 가독성이 떨어져 문서파악이 쉽지 않고 HTML 표준에 따르면 각 속성마다 조합법이 따로 정해져 있기 때문에 속성 조합에 맞게 정의해야 한다.
<title>
해당문서의 이름이며 브라우저 탭에서 표현될 제목을 나타낸다.
<link>
문서를 다양한 스타일로 표현할 수 있는 외부 CSS파일을 연결한다.
<script>
문서 내에서 클릭이나 드래그 등 다양한 동작을 할 수 있게 하는 JavaScrtipt 코드를 작성한다.
<body>
사용자들이 실질 적으로 보게 되는 내용이 담겨 있다.
'Coding > HTML & CSS' 카테고리의 다른 글
| HTML - 정의형 목록 (0) | 2025.02.20 |
|---|---|
| HTML- 순서형 비순서형 요소 (0) | 2025.02.19 |
| HTML - anchor 요소 (2) | 2025.02.18 |
| HTML - 이미지와 피겨 요소 (0) | 2025.02.18 |
| HTML - 헤딩 요소와 단락 요소 (0) | 2025.02.17 |