데이터분석

HTML 구조 정리

nirocat 2024. 1. 11. 16:58
반응형

 

HTML의 기본 구조에 대한 간단한 예시는 아래에 있습니다.

HTML 문서는 기본적으로 태그(tag)로 이루어져 있으며, 각 태그는 문서의 다른 부분을 정의하거나 표시합니다.

 

아래 html에서 tag는 <html lang="en> </html> , <head> </head>, <body> </body> 이다.

보는 거와 같은 tag를 시작하는 < 블라블라 >와 끝내주는 </블라블라>가 짝을 맞춰 있다. 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
</head>

<body>

    <!-- 여기에 내용을 작성합니다. -->

</body>

</html>

 

 

<head> : 문서의 메타데이터와 링크, 스크립트 등을 포함하는 부분

  • <meta charset="UTF-8">: 문서의 문자 인코딩을 지정합니다. 대부분의 경우 UTF-8을 사용합니다.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 기기에서 페이지가 올바르게 표시되도록 하는 뷰포트 설정입니다.
  • <title>: 문서의 제목을 정의합니다. 브라우저 탭에 표시되는 부분입니다.

title 안의 내용은 인터넷 창의 헤드에 표시 됩니다!

<body>: 실제 내용이 들어가는 부분입니다. 텍스트, 이미지, 링크 등을 포함

 

** 

HTML은 태그의 중첩 구조를 가지고 있고, 열린 태그와 닫힘 태그로 이루어져 있다. 

단, 몇몇 태그는 닫히는 태그가 필요 없는 경우도 있습니다.

 

그리고 웹페이지에서 html 구조를 볼때도 간혹가다가 태그들 짝이 안 맞는 경우가 있는데 다행히도 html은 페이지가 다운되거나 하지는 않고 그냥 실행 시킨다! (물론 , 문제는 있을 수 있겠지!)

728x90