1. HTML
하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다.
HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하여 대화형 양식을 생성하는 데 사용될 수 있다.
HTML은 웹 페이지 콘텐츠 안의 **꺾쇠 괄호(<>)**에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트, 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다.
HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.
출처: https://ko.wikipedia.org/wiki/HTML
1) 문서의 골격
아래 코드는 HTML 문서의 기본적인 틀이다.
<!--index.html-->
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset="UTF-8">
<title>HTML 문서의 제목</title>
</head>
<body>
<h1>Hello</h1>
<p>HTML</p>
</body>
</html>
추가적으로 첫 페이지 이름을 보통 index.html라고 명칭을 짓고는 한다.
현재는 관습이라고 생각하면 편하고, 예전에는 웹서버에서 디렉토리 파일 목록을 보여주기위해 index.html로 만들었다고 한다.
옛날에는 웹서버에 지금우리가 작성하는 웹페이지가 아니라 파일들만 있었기 때문에 전통적인 웹서버(apache/nginx)에선 웹서버가 파일목록(index.html)을 만들어 보여줬다고 한다.
<!doctype html>, <html>
- <!doctype html> : 선언된 페이지의 HTML 버전이 무엇인지 브라우저에 알려주는 역할.
HTML5 기준으로 <!doctype html>으로 작성하며, html 파일의 최상단에 위치해야 한다. - <html> : HTML 문서의 루트 요소(최상위 요소)를 정의할 때 사용.
DOCTYPE 선언 제외, 모든 다른 HTML 요소를 포함하기 위함이며,
브라우저에게 해당 문서가 HTML 문서임을 알려주는 역할.
💡 ③ <html lang=''>와 <meta charset=""> - 추가적으로 lang='ko' 라는 속성이 존재한다.
검색엔진 및 브라우저 지원 목적(웹접근성)을 위한 속성이며, 스크린리더의 자동 음성 변환, 크롬 자동번역 인터페이스 등에 사용된다.
<head>, <body>
- <head> : 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의할 때 사용.
다음과 같은 요소들이 <head> 요소에 포함되어야 한다.
<script>, <noscript> 요소는 <head> 요소뿐만 아니라 <body> 요소에 포함될 수도 있다.
- <title>, <style>, <base>, <link>, <meta>, <script>, <noscript> - <body> : 해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용
HTML 문서에는 단 하나의 <body> 요소만이 존재할 수 있다.
<title>, <meta>
- <title> : 해당 문서의 제목(title)을 정의할 때 사용.
이러한 <title> 요소는 브라우저의 제목 표시줄이나 페이지 탭의 제목, 해당 페이지에 대한 즐겨찾기 이름, 검색 엔진에 의한 검색 결과에서도 해당 페이지의 제목으로 나타난다.
모든 HTML 문서에는 <title> 요소가 필요하지만, 두 개 이상의 <title> 요소를 포함할 수는 없다.
만약 HTML 문서에 <title> 요소가 존재하지 않으면, 해당 문서는 HTML 유효성 검사를 통과하지 못 한다. - <meta> : 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용.
이러한 <meta> 요소는 언제나 <head> 요소 내부에 위치해야 한다.
지금 상태에서는 <meta charset=”UTF-8”> 정도만 이해하면 된다.
html 파일의 인코딩을 알려주는 태그이며, 한글, 특수문자들을 사용할 수 있게 만들어 준다.
다른 메타데이터 관련 요소들이(<base>, <link>, <script>, <style>, <title>) 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 된다.
💡 ③ <html lang=''>와 <meta charset="">
<h1>-<h6>, <p>
- <h1> ~ <h6> : HTML 문서에서 제목(heading)을 정의할 때 사용.
<h1> 요소가 가장 중요한 제목을 정의하고, <h6> 요소가 가장 덜 중요한 제목을 정의한다. - <p> : 태그는 문단(paragraph)을 정의할 때 사용.
브라우저는 자동으로 <p> 요소의 위쪽과 아래쪽에 약간의 여백을 추가한다.
이러한 여백은 CSS의 margin 속성을 사용하여 조정할 수 있다.
2) 단어 및 부가 설명
① 메타데이터(Metadata)
데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터.
메타(Meta)는 일반적으로 "~에 관한"(about)이라는 의미로 사용된다.
그래서 메타데이터는 다른 데이터를 기술하기 위해 사용하는 데이터라고 할 수 있다.
② 문자 인코딩(Character Encoding)
사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것.
웹브라우저, 컴퓨터의 HTML파일을 웹브라우저에서 표시될 수 있도록 변환하는 처리작업이다.
- 파일의 정보 형태가 어떤 언어로 되어 있는지 지정이 필요한데 이것을 문자 인코딩이라 한다.
ASCII, ANSI, UNICODE(UTF-8, UTF-16, UTF-32), EUC-KR 등이 있지만,
보통 우리 나라에서는 UTF-8을 사용한다고 생각하면 편하다.
③ <html lang=''>와 <meta charset="">
위에서 <html lang='ko'>와 <meta charset="UTF-8">에 대해서 다뤘다.
<meta charset="UTF-8">대신에 <html lang='ko'>를 사용해도 되나 궁금해할 수 있는데, 설명하자면 아래와 같다.
<html lang = ""> 속성은 현재 페이지 속의 텍스트가 어떤 '언어'로 작성되었는지 나타내어 주는 것이며,
<meta charset =""> 속성은 현재 페이지에 사용된 "인코딩 규격"을 정해준다.
즉, 문서 작성에서 한글, 특수 문자들이 깨지지 않게 사용하는 것이 <meta charset ="">가 되겠고, <html lang=' '>는 웹에서 접근하였을 때, lang 속성으로 표기한 언어에 알맞도록 적용되어 웹을 편하게 이용할 수 있게 도움을 주는 웹 접근성 관련 속성이다.
더 요약하자면 <meta charset =""> 속성은 필수적이라고 볼 수 있고, <html lang = ""> 속성은 부가적이라고 생각하면 편하다.
참고: <meta charset>대신에 <html lang="ko">를 써도 되나요?
Notion Link: https://solar-textbook-084.notion.site/HTML-CSS-1-HTML-3ad629a87b3c464da1ea26ec3a7251da
