Skip to main content

HTML 기본 구조

HTML 시작하기​

HTML은 HyperText Markup Language의 약자로 웹페이지의 구조와 내용을 정의해요.

마크업 언어(Markup Language)는 태그(Tag)와 요소(Element)를 사용해 문서를 구성하고 콘텐츠를 정의하는 언어를 뜻해요.

HTML은 링크(Link)를 활용해 텍스트 기반의 문서와 컨텐츠를 서로 연결하는 하이퍼텍스트(HyperText)를 활용한 마크업 언어로, 웹페이지의 틀을 잡는 골격과 같아요.

HTML을 활용하면 웹페이지의 제목(h1-h6), 문단(p), 링크(a), 이미지(img) 등 다양한 요소와 콘텐츠를 정의할 수 있어요.

간단한 예시를 살펴볼게요!


태그(Tag)​

HTML은 태그(Tag)라는 요소로 이루어져 있어요. 태그는 <html>처럼 <와 >로 둘러싸인 텍스트로 구성돼요.

태그는 시작 태그와 종료 태그로 구성되며, 태그로 구성하는 요소의 내용을 묶어주는 역할을 해요.

시작 태그는 <태그이름>(예: <html>), 종료 태그는 </태그이름>(예: </html>)와 같이 /를 태그 이름 앞에 붙여서 표기해요.

이렇게 시작 태그와 종료 태그로 감싸진 것을 요소(Element)라고 해요.

요소 예시
<div>Hello World!</div>

요소는 웹페이지의 가장 기본적인 블록으로, 텍스트, 이미지, 영상, 입력란 등 웹페이지의 콘텐츠를 정의해요.


HTML 태그 종류​

HTML 태그는 100개가 넘을 정도로 다양하지만, 주로 아래와 같은 태그들이 사용돼요.

  • <div>: 웹페이지의 레이아웃(Division, 틀)을 구성하고, 하위 요소를 그룹화

  • <p>: 단락(Paragraph)을 나타내는 태그로, 텍스트로 구성된 문단 정의

  • <input>: 사용자로부터 데이터를 입력 받을 떄 사용

  • <img>: 이미지를 표시하는 태그로, src 속성을 통해 이미지 파일의 경로 지정

  • <a>: 다른 웹페이지나 특정 섹션으로 이동하는 하이퍼링크(Hyperlink) 정의

  • <ul>: 순서가 없는 목록(Unordered List) 정의

  • <li>: <ul> 태그 내에서 목록 내 각 콘텐츠를 구성

참로로 img와 input 태그는 하위 내용을 갖지 않기 때문에 종료 태그(</tag>) 없이 사용 가능한 단일 태그에요.

단일 태그는 아래와 같이 시작 태그의 '>' 왼쪽에 '/'를 붙여요.

input 단일 태그 예시
<input type="text" placeholder="이름 입력" />

위 코드는 사용자의 이름을 받는 텍스트 입력란 예시로, 마지막에 placeholder="이름 입력" />와 같이 슬래시가 시작 태그 뒤에 붙은 것을 확인할 수 있어요.


html 태그​

html 태그
<html>
  ...
</html>

HTML 문서의 모든 내용은 <html> 시작 태그와 </html> 종료 태그 사이에 작성해요.

HTML 기본 골격
<html>
  <head>
    <!-- 문서의 메타 데이터(구조화된 중요 정보), 외부 소스와의 연결 등을 정의 -->
  </head>
  <body>
    <!-- 화면에 보이는 문서의 콘텐츠 정의 -->
  </body>
</html>

예시를 보면 <html> 태그 안에 <head> 태그와 <body> 태그가 있어요.

head, body 태그는 웹페이지에서 어떤 역할을 할까요?


head 태그​

head 태그
<head>
  <title>Website Title</title>
  <meta name="description" content="Website Description" />
  <link rel="stylesheet" href="styles.css" />
  <script>
    console.log('hi');
  </script>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

<head> 태그는 검색엔진과 웹브라우저에게 문서의 메타데이터(Metadata, 구조화된 중요 정보)를 제공하고, 웹페이지를 매끄럽게 표시하기 위한 외부 자원(예: CSS, JavaScript, font)과 연결해요.

<head> 태그 안에 들어가는 주요 정보들은 아래와 같아요.

  • <title>: 문서의 제목 - 브라우저 탭 제목이나 페이지를 북마크할 때 표시되는 제목

  • <meta>: 문서의 메타데이터 - 문서의 언어, 모바일 화면 최적화(뷰포트) 설정, 검색 엔진에 표시할 정보 등

  • <link>: 외부 리소스와 연결 - CSS 파일, 파비콘(icon), 스타일 시트 등을 연결

  • <script>: 자체 작성한 JavaScript 코드 및 외부 JavaScript 파일을 불러오거나, JavaScript 코드를 실행

  • <style>: 문서에 포함된 CSS 스타일 정의


body 태그​

body 태그
<body>
  <h1>안녕하세요</h1>
  <p>반갑습니다</p>
  <img
    src="https://assets.codefriends.net/assets/etc/codefriends-symbol.png"
    width="100px"
    height="100px"
  />
</body>

<body> 태그는 실제 웹페이지에 표시할 내용을 정의해요.

텍스트, 이미지, 비디오 등 웹페이지의 모든 콘텐츠를 body 태그 안에 정의해요.

body 태그에는 주로 아래와 같은 정보를 담아요.

  • 구조화된 요소: 제목(<h1>, <h2>, ...), 레이아웃(<div>, <span>) 단락(<p>), 목록(<ul>, <ol>, <li>), 링크(<a>) 등 구조화된 콘텐츠 정의

  • 폼(Form, 양식): 정보를 받기 위한 입력 폼(<form>), 텍스트 입력란(<input>), 버튼(<button>) 등의 양식 요소를 정의하고 사용자 입력을 처리

  • 스크립트: JavaScript 코드는 <head> 태그 뿐만 아니라 <body> 태그 안에서도 사용 가능

이제 코드에디터를 활용해 텍스트를 작성해 볼까요?


h 태그​

<h1>부터 <h6>까지 정의된 <h> 태그는 문서의 제목(heading) 요소를 나타내요.

이 태그들은 웹 페이지의 계층 구조를 형성하고 내용의 중요도를 나타내는 데 사용해요.

<h1>은 가장 중요한, 높은 수준의 큰 제목을 나타내며, <h6>은 가장 낮은 수준의 작은 제목을 뜻해요.

예를 들어 h1 태그는 아래와 같이 사용할 수 있어요.

h1 태그 예시
<h1>안녕하세요</h1>

위와 같은 HTML 코드는 "안녕하세요"라는 큰 제목을 표시해요.

검색 엔진 최적화(SEO)를 위해서는 하나의 웹페이지에는 하나의 h1 태그만 들어가는 것이 좋아요.

시작 태그인 <h1>은 큰 제목의 시작을 나타내고, 종료 태그인 </h1>는 큰 제목의 끝을 나타내요.

참고로 태그 이름은 대소문자를 구분하지 않아요. 따라서 <h1>과 <H1>은 웹브라우저가 같은 것으로 인식해요.

다만 태그는 일반적으로 소문자로 작성하는 것이 관례이기 때문에. <H1>이 아닌 <h1>과 같이 소문자로 작성하는 것을 권장해요.


p 태그​

<p> 태그는 웹페이지에 단락(Paragraph)을 넣을 떄 사용해요.

p 태그의 주요 특징은 아래와 같아요.

  1. 텍스트의 구분: 웹페이지에서 시작 태그 <p>와 종료 태그 </p> 사이에 있는 텍스트는 하나의 단락으로 정의돼요.

  2. 자동 줄바꿈: 문단의 길이가 브라우저의 가로 너비를 벗어나면, 텍스트가 자동으로 줄바꿈되어 표시됩니다.

  3. 중첩 불가: <p> 태그 안에 다른 요소(예: 다른 <p> 태그, <div> 등)를 포함할 수 없어요. <p> 태그 안에는 오로지 텍스트만 포함시켜야 해요.

p 태그는 아래와 같이 사용할 수 있어요.

p 태그
<p>첫번째 단락</p>
<p>두번째 단락</p>

HTML id​

HTML id는 특정 HTML 요소를 고유하게 식별하기 위한 식별자(Selector)로 사용돼요.

웹페이지 내에서 id는 고유해야 해요. 여러 HTML 요소가 같은 id를 가질 수는 없어요.

id는 주로 특정 요소에 고유한 id를 부여해, 필요한 경우에 CSS나 JavaScript에서 해당 요소를 선택하고 조작하기 위해 사용해요.

HTML id 사용 예시
<p id="intro">반갑습니다</p>

이렇게 intro라는 id를 부여 받은 p 태그로 구성된 HTML 요소는

CSS로 선택해 스타일을 조정하거나 JavaScript로 동적인 요소를 추가할 수 있어요.

참고로 id는 대소문자를 구분해요. 즉, Intro와 intro는 다른 id에요.

하지만 id는 관례적으로 소문자를 사용해요.


복습하기​

지금까지 배운 내용을 다시 한번 복습하고, HTML의 기본 구조를 확실하게 익혀 보세요 🙂

HTML 기본 골격
<html>
  <head>
    <title>제목</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p id="intro">반갑습니다</p>
  </body>
</html>