Minwoo Dev.

<title>, <html>, <head>, <body>, HTML 문서의 기본 구조 본문

Web

<title>, <html>, <head>, <body>, HTML 문서의 기본 구조

itisminu 2023. 7. 22. 12:04
728x90
반응형
SMALL

이제 자주 사용되는 태그들을 여러 개 알아봤으니 기본적인 HTML 문서의 구조에 대해서 알아보자.

 

우선, 우리가 문서를 작성할 때, 그 문서 자체의 제목은 파일명으로만 저장해두는 경우가 많은데, HTML 에서는 <title> 태그로 HTML 문서의 제목을 설정한다.

 

<title>

Definition and Usage (ENG)

The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The <title> tag is required in HTML documents!

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results

Here are some tips for creating good titles:

  • Go for a longer, descriptive title (avoid one- or two-word titles)
  • Search engines will display about 50-60 characters of the title, so try not to have titles longer than that
  • Do not use just a list of words as the title (this may reduce the page's position in search results)

So, try to make the title as accurate and meaningful as possible!

Note: You can NOT have more than one <title> element in an HTML document.

 

정의 및 사용법 (KOR)

태그 <title>는 문서의 제목을 정의합니다. 제목은 텍스트 전용이어야 하며 브라우저의 제목 표시줄이나 페이지의 탭에 표시됩니다.

태그 <title>는 HTML 문서에서 필수입니다.

페이지 제목의 내용은 검색 엔진 최적화(SEO)에서 매우 중요합니다. 페이지 제목은 검색 엔진 알고리즘에서 검색 결과에 페이지를 나열할 때 순서를 결정하는 데 사용됩니다.

<title> : 

  • 브라우저 도구 모음에서 제목을 정의합니다.
  • 즐겨찾기에 추가될  때 페이지의 제목을 제공합니다.
  • 검색 엔진 결과에 페이지 제목 표시.

더 좋은 제목을 만들기 위한 팁.

  • 더 길고 설명이 포함된 제목을 사용하세요. (한 단어 또는 두 단어로 된 제목은 피하세요.)
  • 검색 엔진은 약 50-60자의 제목을 표시하므로 제목이 그보다 길지 않도록 하십시오.
  • 제목으로 단어 목록만 사용하지 마십시오. (이렇게 하면 검색 결과에서 페이지의 위치가 줄어들 수 있음.)

참고 : <title> HTML 문서에는 하나의 요소만 존재해야 합니다.

 

출처 - https://www.w3schools.com/tags/tag_title.asp

 

HTML title tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

<html>

Definition and Usage (ENG)

The <html> tag represents the root of an HTML document.

The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

Note: You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

정의 및 사용법

태그 <html>는 HTML 문서의 루트를 나타냅니다.

태그는 다른 모든 HTML 요소의 컨테이너입니다. (<!DOCTYPE><html> 태그 제외.)

참고 : 웹 페이지의 언어를 선언하려면 항상 태그 안에 lang 속성을 포함해야 합니다. 이는 검색 엔진과 브라우저를 지원하기 위한 것입니다.

 

출처 - https://www.w3schools.com/tags/tag_html.asp

 

HTML html tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<head>

Definition and Usage (ENG)

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The following elements can go inside the <head> element:

 

정의 및 사용법 (KOR)

요소 <head>는 메타데이터(데이터에 대한 데이터)의 컨테이너이며 <html> 태그와 <body> 태그 사이에 배치됩니다.

메타데이터는 HTML 문서에 대한 데이터입니다. 메타데이터가 표시되지 않습니다.

메타데이터는 일반적으로 문서 제목, 문자 집합, 스타일, 스크립트 및 기타 메타 정보를 정의합니다.

다음 요소는 <head>요소 내부에 들어갈 수 있습니다.

 

출처 - https://www.w3schools.com/tags/tag_head.asp

 

HTML head tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<body>

Definition and Usage (ENG)

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Note: There can only be one <body> element in an HTML document.

정의 및 사용법 (KOR)

태그 <body>는 문서의 본문을 정의합니다.

요소에는 <body> 제목, 단락, 이미지, 하이퍼링크, 표, 목록 등과 같은 HTML 문서의 모든 내용이 포함됩니다.

참고 : <body> HTML 문서에는 하나의 요소만 있을 수 있습니다.

 

출처 - https://www.w3schools.com/tags/tag_body.asp

 

HTML body tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

위의 내용들이 들어간 HTML 문서의 기본 구조는 아래와 같다.

<!doctype html>
<html>
<head>
  <title>My introduction</title>
  <meta charset="utf-8">
</head>

<body> 
  <h1>MY NAME</h1>
  <p>나의 이름은 <strong>이민우</strong> 이고, 영어로는 <strong>LEE MIN WOO</strong>, 한자로는 <strong>李旼宇</strong> 이다.</p>
</body>

</html>

 

저 위의 코드들 중 먼저 <head> 태그 안을 먼저 살펴보자.

<head>
  <title>My introduction</title>
  <meta charset="utf-8">
</head>

<head> 태그는 본문에 대한 설명을 모두 담는다. 

<title>태그로 감싸진 제목과 'utf-8'의 형식으로 코드를 읽어내라는 <meta> 태그가 있다.

  <meta charset="utf-8"> : 브라우저에서 utf-8 형식으로 코드를 읽으라는 말.

 

<body> 
  <h1>MY NAME</h1>
  <p>나의 이름은 <strong>이민우</strong> 이고, 영어로는 <strong>LEE MIN WOO</strong>, 한자로는 <strong>李旼宇</strong> 이다.</p>
</body>

본문은 <body> 태그로 묶어야한다. 

본문에 해당하는 <h1> 태그와 <p> 태그가 안에 있는 걸 볼 수 있다.

 

 

즉, HTML의 모든 태그는 <head> 태그나 <body> 태그 안에 있다.


그리고, <head> 태그와 <body> 태그를 감싸는 최상위 태그는 <html> 태그이다. 

 

 

 

 

정리하면 ,  HTML 문서의 가장 기본적인 구조는 아래 태그들이 포함된다.

  • <!DOCTYPE>
  • <html></html>
  • <head></head>
  • <body></body>

<!DOCTYPE>
<html></html>
<head></head>
<body></body>

728x90
반응형
LIST
저작자표시

'Web' 카테고리의 다른 글

HTML Project - About Minwoo  (0) 2023.07.29
<a>  (0) 2023.07.23
<li> 태그, 목차를 나타내는 방법  (0) 2023.07.22
<img> 태그, 속성(Attribute)  (0) 2023.07.22
<h1> 태그, 제목을 나타내는 방법  (0) 2023.07.16
'Web' Related Articles more