본문으로 건너뛰기
실습하기

HTML 총정리

HTML은 "HyperText Markup Language"의 약자로 웹 페이지의 구조와 내용을 정의하는데 사용되는 마크업 언어입니다.

웹 브라우저는 HTML 코드를 해석해 사용자에게 웹페이지를 표시합니다.


웹페이지 기본 구조​

HTML
<!DOCTYPE html>
<html>
  <head>
    <!-- 웹페이지 기본 정보 -->
    <title>문서의 제목</title>
  </head>
  <body>
    웹 페이지의 주요 내용
  </body>
</html>

  1. <!DOCTYPE html>: 문서 타입 선언. 현재 문서가 HTML5로 작성되었음을 나타냅니다.

  2. <html>: HTML 문서의 시작과 끝을 나타냅니다.

  3. <head>: 문서의 메타 정보, 스타일, 스크립트 등의 정보를 포함합니다.

  4. <title>: 브라우저 탭에 표시되는 문서의 제목을 설정합니다.

  5. <body>: 실제 웹 페이지의 내용을 포함합니다.


몇 가지 주요 HTML 태그:​

  1. 제목 태그 : 웹 페이지의 제목이나 부제목을 나타냅니다.
코드 예시
<h1>제목1</h1>
<h2>제목2</h2>
...
<h6>제목6</h6>
  1. 단락 태그 : 텍스트 단락을 생성합니다.
코드 예시
<p>텍스트 단락</p>
  1. 링크 태그 : 다른 페이지로의 링크를 생성합니다.
코드 예시
<a href="URL">링크 텍스트</a>
  1. 이미지 태그 : 웹 페이지에 이미지를 삽입합니다.
코드 예시
<img src="이미지URL" alt="대체 텍스트">
  1. 목록 태그 : 순서 있는 목록과 순서 없는 목록을 생성합니다.
코드 예시
<!-- 순서 있는 목록 -->
<ol>
  <li>항목1</li>
  <li>항목2</li>
</ol>

<!-- 순서 없는 목록 -->
<ul>
  <li>항목1</li>
  <li>항목2</li>
</ul>

지금까지 웹사이트의 골격, HTML 강의를 수강하느라 정말 고생 많으셨습니다 🙌

다음 강의는 웹사이트의 옷, CSS가 무엇이고 어떻게 사용하는지 배워보겠습니다!

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!