HTML은 Hyper Text Markup Language의 약자로 '하이퍼텍스트 마크업 언어'라고 번역할 수 있습니다. 웹페이지를 만드는 데 사용되는 표준 마크업 언어로 웹페이지의 구조를 정의합니다. HTML은 웹브라우저에게 웹페이지의 콘텐츠가 어떤 의미를 갖는지 알려주며 그에 따라 적절하게 화면에 표시하도록 합니다.
HTML 구조
모든 HTML 문서는 일정한 구조를 가지고 있습니다. 보통 아래와 같이 기본적인 HTML의 구조를 나타낼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1>가장 중요한 제목</h1>
<p>일반 텍스트</p>
</body>
</html>- <!DOCTYPE html>: HTML5를 의미하는 문서 유형 정의입니다.
- <html>: HTML 문서의 루트 요소입니다.
- <head>: 메타정보가 위치하는 부분입니다. 웹페이지의 제목이나 CSS 스타일시트 링크, 문자 인코딩 등이 여기에 위치합니다.
- <title>: 웹페이지의 제목을 정의하는 부분으로 브라우저의 탭에 표시됩니다.
- <body>: 실제로 웹페이지에서 보여지는 콘텐츠가 위치하는 부분입니다.
HTML 구성요소
HTML 문서는 HTML 요소(element)라고 부르는 여러 개의 구성요소로 이루어져 있습니다. HTML 요소는 시작 태그, 콘텐츠, 그리고 종료 태그로 이루어져 있습니다.
<태그>콘텐츠</태그>
예를 들어, '안녕하세요?'라는 텍스트를 HTML 페이지에 표시하려면 다음과 같이 작성합니다.
<p>안녕하세요?</p>위 코드에서 <p>는 시작 태그, "안녕하세요?"는 콘텐츠, </p>는 종료 태그입니다. <p> 태그는 단락을 나타내는 HTML 요소입니다.
HTML에는 매우 다양한 요소가 있으며 각각은 웹페이지의 특정 부분을 표시하는 역할을 합니다. 예를 들어 <h1> 부터 <h6>까지의 태그는 제목을 나타내며 <a> 태그는 하이퍼링크를 나타냅니다.
HTML 다양한 요소들
HTML 요소는 매우 다양하며, 각각은 웹페이지의 특정 부분을 표시하는 역할을 합니다. 여기에는 텍스트를 포함하는 요소, 이미지를 표시하는 요소, 링크를 생성하는 요소 등이 포함됩니다.
제목 태그
HTML에서는 <h1>부터 <h6>까지의 제목 태그를 사용하여 텍스트에 계층적인 중요도를 부여합니다. <h1>은 가장 크고 중요한 제목을 나타내며 <h6>은 가장 작고 중요도가 낮은 제목을 나타냅니다.
<h1>가장 중요한 제목</h1>
<h2>두 번째로 중요한 제목</h2>
<h6>가장 낮은 중요도의 제목</h6>
링크 태그
<a> 태그는 하이퍼링크를 생성합니다. 'href' 속성에 연결할 웹페이지의 URL을 지정하면 됩니다.
<a href="https://tip1spoon.tistory.com/">여기를 클릭하세요</a>위 코드는 '여기를 클릭하세요'라는 텍스트에 'https://tip1spoon.tistory.com/'으로의 링크를 걸어줍니다.
이미지 태그
<img> 태그를 사용하면 웹페이지에 이미지를 삽입할 수 있습니다. 'src' 속성에 이미지 파일의 경로를 지정하면 됩니다. 'alt' 속성은 이미지를 표시할 수 없을 때 대신 표시되는 텍스트입니다.
<img src="myimage.jpg" alt="My Image">
HTML 중첩 태그
HTML 요소는 다른 요소 안에 중첩되어 사용될 수 있습니다. 예를 들어, 단락(<p>) 안에 링크(<a>)를 넣거나, 제목(<h1>) 아래에 여러 개의 단락을 놓는 것이 가능합니다.
<h1>제목</h1>
<p>이것은 <a href="https://tip1spoon.tistory.com/">링크</a>가 있는 단락입니다.</p>
이렇게 HTML은 웹페이지의 기본 구조와 내용을 설명하는 데 사용되는 언어입니다. HTML은 웹 개발의 기본이며, 이를 알아두면 웹페이지의 구조를 이해하는 데 큰 도움이 됩니다. 다음 시간에는 HTML과 함께 자주 사용되는 CSS와 JavaScript에 대해 알아보도록 하겠습니다.