[HTML5] 웹페이지를 구성하는 기본 태그

Joo·2023년 10월 9일

html

HTML5

목록 보기

2/4

1. 문서 형식 정의(DTD) 태그

HTML5에서 쓰이는 html document에서 최상위에 위치한 태그

<!DOCTYPE html>

2. html 태그

html 문서안에 모든 요소들은 <html> 태그 안에 위치한다. 즉, 모든 요소들의 부모 태그이다.

lang 속성 : html 태그에서 언어를 지정할 수 있도록 설정

3. head 태그

다양한 메타데이터 요소들을 가지는 태그로 브라우저에 표시되지 않는 정보들을 담고 있다.

title 태그 : 웹사이트 탭의 제목
meta 태그 : 다양한 메타데이터 속성과 값을 가질 수 있음

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>이것은 타이틀 입니다.</title>
  </head>
  <body>
    <p>안녕하세요</p>
  </body>
</html>

4. style 태그

body 안의 요소에 원하는 style을 지정할 수 있는 태그

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>이것은 타이틀 입니다.</title>
    <style>
      body {
        color: pink;
      }
    </style>
  </head>
  <body>
    <h1>안녕하세요</h1>
  </body>
</html>

5. link 태그

외부 리소스를 연결할 수 있는 태그

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>이것은 타이틀 입니다.</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>안녕하세요</h1>
  </body>
</html>

6. script 태그

script 안에 원하는 JS 기능들을 추가
src 속성을 사용하면 외부 script 연결 가능

7. meta 태그

description, keywords, author 등의 메타데이터를 표시하는 태그
메타데이터는 브라우저의 검색엔진을 통해 SEO에 영향을 줌

keywords : SEO 검색엔진
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
웹페이지를 30초마다 refresh
<meta http-equiv="refresh" content="30">