본문 바로가기
HTML + CSS + 자바스크립트

HTML 기본 구조 알아보기

by Ellie.P 2023. 11. 21.
반응형

<!DOCTYPE html> 
<html lang="ko"> 
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page!</title>
  </head>
  <body>
    <!-- 웹 페이지에 표시할 내용 -->
    <p>나의 첫 번째 웹 페이지!</p>
  </body>
</html>

 

DTD

문서형 정리

HTML5 문서 형식으로 해석

<!DOCTYPE html>

html 태그

HTML 문서의 시작과 끝

모든 태그는 html 태그 안에 콘테츠로서 작성해야함

<html lang="ko">

</html>

head 태그

 

문서 정보 정의

즉, HTML 문서의 메타데이터 정의 영역

웹 브라우저 직접 노출 ❌

meta, title, link 등 문자열, 문서 제목, CSS, 자바스크립트 참조 경로 등을 정의

(⭐️ 메타데이터 : HTML 문서에 대한 정보)

  <head>
    <!-- 해당 문서의 인코딩 언어를 UFT-8 형식을 지정함 -->
    <meta charset="UTF-8">
    <!-- 인터넷 익스플로어의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 기기의 화면 너비에 맞추기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 문서 제목 지정 -->
    <title>My First Web Page!</title>
  </head>

👀 viewport 👀

반응형 웹페이지에서는 필수

 

✨ title 태그

생략 불가능

반드시 1개

중복되지 않도록 주의

title 태그를 사용하지 않았을 경우, 웹브라우저는 해당 HTML문서를 웹페이지로 인식하지 않음

반응형