HTML의 기본 구조
HTML 문서는 정해진 형식에 맞추어 내용을 입력해야 한다.
좌측 이미지와 같이 <html>, <head>, <body>라는 세 가지의 영역으로 구성되어 있다.
<html></html> 태그는 웹 문서의 시작과 끝을 나타내는 태그로,
이 태그 안에 있는 모든 내용을 웹 브라우저가 소스를 읽어 화면에 출력한다.
<head></head> 태그는 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 영역으로,
타이틀, 메타요소, 인코딩, 스타일 시트 등 중요한 내용들을 내포하며,
이 영역의 내용은 화면에 출력되지 않는다.
<body></body> 태그는 실제로 웹 브라우저 화면에 나타나는 내용을 저장하며,
대부분의 HTML태그는 <body> 태그 안에서 작성된다.
HTML의 기본 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UFT-8">
<meta name="keyword" content="웹 문서의 키워드 입력">
<meta name="description" content="웹 문서의 설명 입력">
<meta name="authot" content="웹 문서의 소유자나 저작자">
<meta name="copy light" content="ⓒ 웹 문서의 저작권 내용">
<meta name="reply-to" content=이메일>
<meta name="date" content="년/월/일T시/분/초+09:00">
<title>웹 문서의 제목</title>
</head>
<body>
</body>
</html>위 코드는 실제 문서를 작성할 때 사용되는 기본적인 태그들이다.
<!DOCTYPE html>
웹 문서의 첫 부분으로 웹 문서의 문서 유형을 지정하는 선언문이다.
HTML5 언어로 작성한 웹 문서라는 의미로 사용된다.
<html></html>
위에서 설명한 것과 마찬가지로 웹 문서의 시작과 끝을 알리는 태그다.
<html> 태그에서는 lang속성을 사용하여 문서에서 사용할 언어를 지정할 수 있는데,
한국어로 작성할 경우 ko, 영어로 작성할 경우 en으로 속성값을 표시하고 <html lang="ko> 형태로 작성한다.
이 lang 속성의 경우 검색 사이트에서 특정 언어로 제한하여 검색할 경우나 화면 낭독기에서 웹 문서를 읽을 때 필요하다.
모든 태그들은 <html>태그 안에서 작성되며, </html> 태그 뒤에는 아무 내용도 없어야 한다.
<head></head>
웹 브라우저에 문서 정보를 알려주는 태그로 중요한 내용들이 작성된다.
대부분의 웹 브라우저에서는 <head> 태그 안에 작성 된 내용들은 보이지 않으며, 스타일 파일 시트도 <head> 태그 안에서 연결된다.
<meta>
<head>태그 안에 사용되는 문서 정보가 들어 있는 태그로, 웹 문서와 관련된 정보를 지정할 때 사용한다.
가장 중요한 태그는 <meta charset="UFT-8">이다.
<meta charset="UFT-8">는 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것으로,
영어가 기본인 웹 서버에서 한글로 된 내용을 표시할 때는 UFT-8이라는 문자 세트를 사용한다고 웹 브라우저에 알려줘야 한다.
그 밖에도 <meta> 태그를 사용하여 웹 사이트의 키워드, 설명, 제작자, 저작권 등을 지정할 수 있으며
이 정보들은 검색 엔진에서 사이트를 검색할 때 참고된다.
<title></title>
<head> 태그 안에서 가장 중요한 태그로, 웹 문서의 제목을 나타내는 태그다.
이미지와 같이 거의 모든 웹 브라우저의 제목 표시줄에 표시되며, 웹 사이트의 즐겨찾기를 지정할 때도 웹 문서의 제목이 기본값이 된다.
<body></body>
실제 웹 브라우저에 표시할 내용을 입력하는 영역으로 대부분의 HTML태그는 이 태그 안에서 사용한다.
'🖥️FrontEnd > 🔴HTML' 카테고리의 다른 글
| [HTML] input type=date (yyyyyy-mm-dd) 해결 방법 | 달력 표시하기 (0) | 2024.10.29 |
|---|---|
| [HTML] <i> 태그로 아이콘 넣기 (0) | 2024.07.04 |
| [텍스트 태그] <hn></hn> (0) | 2023.05.11 |
| 시멘틱 태그 (0) | 2023.05.11 |
| HTML5의 정의 (0) | 2023.05.10 |