3. HTML5 Tag

문서 형식 정의
html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단 <!DOCTYPE>는 예외이다.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
  </head>
  <body>
    화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
  </body>
</html>

2.html tag
html은 글로벌 어트리뷰트를 지원. 특히 lang 어트리뷰트를 자주 사용.

<html lang="ko">

3.head tag
head tag 는 메타데이터를 포함시키기 위한 요소.

웹페이지에 단 하나만 존재

HTML 문서의 title, style, link, script에 대한 데이터로 화면 표시되지 않음

메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다.

3.1 title tag
title 요소는 문서의 제목을 정의. 정의된 제목은 브라우저의 탭에 표시됨

3.2 style tag
style 요소에는 HTML 문서를 위한 style 정보를 정의한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
    <style>
      body {
        background-color: yellow;
        color: blue;
      }
    </style>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>

3.3 link tag
link 요소에는 외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 CSS 파일 연계에 사용한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>

3.4 script tag

script 요소에는 client-side JavaScript를 정의한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      document.addEventListener('click', function () {
        alert('Clicked!');
      });
    </script>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>
코드를 입력하세요

src 어트리뷰트를 사용하면 외부 JavaScript 파일을 로드할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="main.js"></script>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>

3.5 meta tag
meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.

charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>안녕하세요</p>
    <p>Hello</p>
    <p>こんにちは</p>
    <p>你好</p>
    <p>שלום</p>
    <p>สวัสดี</p>
  </body>
</html>

SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords 정의

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

웹페이지의 설명을 정의

<meta name="description" content="Web tutorials on HTML and CSS">

웹페이지의 저자를 명기

<meta name="author" content="John Doe">

웹페이지를 30초마다 Refresh

<meta http-equiv="refresh" content="30">

body tag
body tag는 html 문서의 내용을 나타내며 웹페이지에 단 하나만 존재.

메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.

<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>

Author And Source

이 문제에 관하여(3. HTML5 Tag - Basic), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@khmin3011/3.-HTML5-Tag-Basic-w6baurpv

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

3. HTML5 Tag - Basic

Author And Source

좋은 웹페이지 즐겨찾기