<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>나의 첫번째 웹페이지</p>
</body>
</html>
HTML은 일정한 구조 안에서 작성된다.
vscode에서 템플릿에 !를 입력하고 enter하면 위와 같은 기본 구조가 생긴다.
위의 기본구조에 들어있는 태그에 대해서 기술하겠다.
1. DTD
Document Type Definition (문서 정의형)은 웹프라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주는 것이다.
HTML 문서를 작성할때 항상 처음에 넣어야 한다.
형식
💡 <!DOCTYPE html>
웹브라우저는 HTML 5 문서 형식으로 해석한다.
HTML5 등장이후로 이전 버전의 문서형식을 정의할 필요가 없다.
따라서 항상 위와 같은 형식으로 정의한다.
2. html 태그
HTML 문서의 시작과 끝을 나타낸다. 모든 태그는 html 태그 안에서 작성되어야한다.
3. head 태그
head 태그는 HTML 문서의 메타데이터를 정의하는 영역입니다.
보통 meta, title, link, style, script 등의 태그를 사용해 문서의 여러정보를 정의한다.
메타데이터 : HTML 문서에 대한 정보
meta 태그
- meta 데이터를 정의하는데 사용한다.
- 종료태그가 없음
💡 <meta charset="UTF-8">
위는 HTML에서 허용하는 문자집합을 정의하는 메타 태그이다.
💡 <meta http-equiv=" X-UA-Compatible" content = "IE=edge">
인터넷 익스플로어의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터를 나타낸다.
구 버전의 렌더링 엔진을 사용하는 실험적 프로젝트가 아니라면 위 태그는 정의하는 편이 좋다.
💡 <meta name="viewport" content="width=device-width, initial-scale=1.0">
위 태그는 기기의 화면 너비에 맞추기 위해 사용하는 메타 데이터 태그이다.
viewport는 웹 페이지에 접속했을때 사용자에게 보이는 화면 영역을 의미한다.
title 태그
title 태그는 HTML 문서의 제목을 지정하는데 사용합니다.
모든 HTML 문서는 반드시 1개의 title 태그를 사용해 HTML 문서의 제목을 지정해야한다.
이 제목이 HTML 문서마다 중복되지 않도록 주의해야한다.
왜 중복되면 안될까?
- 한 웹사이트에서 제목이 중복된 문서가 여러개 발견된다면 검색엔진은 해당 웹사이트가 신뢰성이 떨어진다고 판단해서 검색엔진 노출 시에 불이익을 준다.
- 구글이나 네이버 같은 검색 엔진 사이트에서 HTML 문서를 찾을떄 title 태그에 작성된 제목으로 찾는다.
💡 <title>My first Web Page!</title>
4. body 태그
body 태그는 웹 브라우저에 노출되는 내용을 작성하는 영역이다.
따라서 웹브라우저에 표시되는 모든 내용은 body 태그 영역 안에 작성한다.
'👨💻 Programming > HTML' 카테고리의 다른 글
| 2.3 HTML 목록 만들기 (0) | 2024.02.26 |
|---|---|
| 2.2 HTML 그룹짓기 (0) | 2024.02.26 |
| 2.1 HTML 태그로 텍스트 작성하기 (0) | 2024.02.25 |
| 1.3 HTML의 특징 파악하기 (1) | 2024.02.25 |
| 1.1 HTML의 기본 구성 요소 (0) | 2024.02.24 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>나의 첫번째 웹페이지</p>
</body>
</html>
HTML은 일정한 구조 안에서 작성된다.
vscode에서 템플릿에 !를 입력하고 enter하면 위와 같은 기본 구조가 생긴다.
위의 기본구조에 들어있는 태그에 대해서 기술하겠다.
1. DTD
Document Type Definition (문서 정의형)은 웹프라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주는 것이다.
HTML 문서를 작성할때 항상 처음에 넣어야 한다.
형식
💡 <!DOCTYPE html>
웹브라우저는 HTML 5 문서 형식으로 해석한다.
HTML5 등장이후로 이전 버전의 문서형식을 정의할 필요가 없다.
따라서 항상 위와 같은 형식으로 정의한다.
2. html 태그
HTML 문서의 시작과 끝을 나타낸다. 모든 태그는 html 태그 안에서 작성되어야한다.
3. head 태그
head 태그는 HTML 문서의 메타데이터를 정의하는 영역입니다.
보통 meta, title, link, style, script 등의 태그를 사용해 문서의 여러정보를 정의한다.
메타데이터 : HTML 문서에 대한 정보
meta 태그
- meta 데이터를 정의하는데 사용한다.
- 종료태그가 없음
💡 <meta charset="UTF-8">
위는 HTML에서 허용하는 문자집합을 정의하는 메타 태그이다.
💡 <meta http-equiv=" X-UA-Compatible" content = "IE=edge">
인터넷 익스플로어의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터를 나타낸다.
구 버전의 렌더링 엔진을 사용하는 실험적 프로젝트가 아니라면 위 태그는 정의하는 편이 좋다.
💡 <meta name="viewport" content="width=device-width, initial-scale=1.0">
위 태그는 기기의 화면 너비에 맞추기 위해 사용하는 메타 데이터 태그이다.
viewport는 웹 페이지에 접속했을때 사용자에게 보이는 화면 영역을 의미한다.
title 태그
title 태그는 HTML 문서의 제목을 지정하는데 사용합니다.
모든 HTML 문서는 반드시 1개의 title 태그를 사용해 HTML 문서의 제목을 지정해야한다.
이 제목이 HTML 문서마다 중복되지 않도록 주의해야한다.
왜 중복되면 안될까?
- 한 웹사이트에서 제목이 중복된 문서가 여러개 발견된다면 검색엔진은 해당 웹사이트가 신뢰성이 떨어진다고 판단해서 검색엔진 노출 시에 불이익을 준다.
- 구글이나 네이버 같은 검색 엔진 사이트에서 HTML 문서를 찾을떄 title 태그에 작성된 제목으로 찾는다.
💡 <title>My first Web Page!</title>
4. body 태그
body 태그는 웹 브라우저에 노출되는 내용을 작성하는 영역이다.
따라서 웹브라우저에 표시되는 모든 내용은 body 태그 영역 안에 작성한다.
'👨💻 Programming > HTML' 카테고리의 다른 글
| 2.3 HTML 목록 만들기 (0) | 2024.02.26 |
|---|---|
| 2.2 HTML 그룹짓기 (0) | 2024.02.26 |
| 2.1 HTML 태그로 텍스트 작성하기 (0) | 2024.02.25 |
| 1.3 HTML의 특징 파악하기 (1) | 2024.02.25 |
| 1.1 HTML의 기본 구성 요소 (0) | 2024.02.24 |
