위코딩
article thumbnail
반응형

HTML이란 무엇인가요?

HTML은 HyperText Markup Language의 약자로, 웹 페이지를 구성하는 데 사용되는 기본적인 마크업 언어입니다. 1990년대 초에 팀 버너스리(Tim Berners-Lee)에 의해 개발되어 웹의 기본 구조를 정의하는 역할을 합니다. HTML은 웹 페이지의 내용을 구조화하고, 다양한 요소들을 정의하여 웹 브라우저가 이를 해석하여 사용자에게 보여줄 수 있도록 합니다.


HTML 문서의 기본 구조

모든 HTML 문서는 기본적으로 아래와 같은 구조로 이루어져 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>문서 제목</title>
</head>
<body>
    <!-- 웹 페이지의 내용은 이곳에 작성됩니다. -->
</body>
</html>
  • <!DOCTYPE html>: 이 문서가 HTML5 문서임을 선언합니다.
  • <html>: HTML 문서의 루트(root) 요소를 정의합니다. 모든 HTML 요소들은 이 태그 안에 포함되어야 합니다.
  • <head>: 웹 페이지의 메타 정보를 정의하는 부분으로, 브라우저에 직접적으로 보이지 않는 정보들을 포함합니다.
  • <meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정하여 다국어 문자를 지원합니다.
  • <title>: 웹 페이지의 제목을 정의합니다. 브라우저 탭에 표시되는 텍스트로 사용됩니다.
  • <body>: 웹 페이지의 실제 내용을 정의하는 부분으로, 사용자가 브라우저에서 볼 수 있는 모든 콘텐츠들이 이곳에 들어갑니다.

HTML 요소(Element)란?

HTML 문서는 다양한 HTML 요소들로 이루어집니다. 각 요소는 태그(tag)로 표현되며, 이 태그들은 브라우저에게 해당 요소의 의미와 표현 방법을 알려줍니다. 예를 들어, <p> 태그는 단락(Paragraph)을 나타내며, <h1> 태그는 제목(Heading)을 나타냅니다.

<!-- 예시: 단락과 제목 요소 -->
<p>이것은 하나의 단락입니다.</p>
<h1>이것은 제목입니다.</h1>

HTML 요소는 보통 여는 태그(opening tag)와 닫는 태그(closing tag)로 구성됩니다. 닫는 태그는 요소의 끝을 나타내며, 요소의 내용은 여는 태그와 닫는 태그 사이에 위치합니다.


HTML 속성(Attribute)

HTML 요소들은 속성을 가질 수 있습니다. 속성은 요소에 대한 추가 정보를 제공하며, 주로 태그에 추가적인 설정을 할 때 사용됩니다. 예를 들어, 링크를 만들기 위해 <a> 요소에는 href 속성을 사용하여 링크의 주소를 지정할 수 있습니다.

<!-- 예시: 링크 요소 -->
<a href="https://www.example.com">바로 가기</a>

마무리

이상으로 HTML 소개와 기본 구조에 대해 간략히 살펴보았습니다. HTML은 웹 페이지의 기본적인 구조를 정의하는 중요한 언어로, 다른 웹 기술들과 함께 사용하여 멋진 웹 페이지를 만들 수 있습니다. 앞으로 다룰 주제들도 HTML과 함께 적절히 활용하여 코딩에 대해 깊이 있게 학습해보시기 바랍니다!

반응형

'Mark Up > HTML' 카테고리의 다른 글

[HTML] 테이블 생성과 활용  (0) 2023.07.19
[HTML] 이미지와 멀티미디어  (2) 2023.07.19
[HTML] 하이퍼링크와 앵커 태그 (<a> 태그)  (0) 2023.07.19
[HTML] HTML 폼(Form) 요소  (2) 2023.07.19
[HTML] 주요 HTML 태그  (0) 2023.07.19
loading loading