개발 공부/HTML

HTML의 기본 구조 및 태그

짹뚜 2021. 12. 28. 19:46

HTML은 HpyerText Markup Langauge의 줄임말로 웹 페이지의 구조를 만드는 언어이다. 

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p> Hello World! </p>
  </body>
</html>

 

HTML 파일은 위와 같은 형식의 구조로 되어있다. 자세히 보면 단어들이 <...> 사이에 들어가 있는데 이것들을 Tag라고 부른다. 그리고 같은 이름으로 된 Tag들이 한 쌍으로 있는데 이것들을 합쳐서 element (요소)라고 부른다.

Tag 중에 /가 없으면 Opening Tag, 있으면 Closing Tag라고 부른다. 해당 element의 내용은 Opening과 Closing Tag사이에 들어간다. 이러한 element들이 모여서 하나의 html 파일을 만든다.

 

  • <! DOCTYPE html>: 현재 html 파일이 HTML5를 사용한다는 것을 브라우저에게 알려주는 것이다.
  • <html>: 전체 html 파일을 감싸는 태그로 파일에서 하나만 존재한다. (root라고도 한다.)
  • <head>:  html 파일에 대한 정보 또는 metadata들을 나타내는 태그이다. 
  • <body>: 실질적으로 html 파일을 브라우저에서 열었을 때 보이는 내용들을 포함한다.

태그

자주 사용되는 태그들은 다음과 같다.

<head> 에 사용되는 태그

  • <title>: <head>에 사용되는 태그로 웹페이지의 제목을 나타낸다.

<body>  에 사용되는 태그

  • <h1> - <h6>: 제목을 표현할 때 사용하는 태그들로 h1이 가장 중요한 제목, h6이 가장 중요하지 않은 제목을 표현한다.
  • <div>: 보이지는 않지만 구역을 나타낼 때 사용한다.
  • <p>: 문단을 표시할 때 사용한다.
  • <img>: 이미지를 웹페이지에서 출력할 때 사용한다.
  • <ul>: unordered list의 줄임말로 리스트가 숫자 없이 목록으로 출력된다.
  • <ol>: ordered list의 줄임말로 <ul> 태그와는 다르게 숫자와 같이 출력된다.
  • <li>: <ul>과 <ol>에 사용되며 리스트의 한 아이템을 나타낸다.
  • <input>: 사용자의 입력을 받아올 때 사용한다.

태그는 Opening Tag와 Closing Tag가 한 쌍으로 있어야 하지만 특정 태그들은 Closing Tag 없이 사용이 가능하다. 이것을 Self-Closing Tag라고 부른다. 대표적으로 <img> 태그가 Self-Closing Tag이다. Opening Tag를 닫을 때 />을 사용한다.

<img src="img.png" />