HTML(HyperText Markup Language)은 웹 페이지의 구조를 만드는 기본 언어입니다.
텍스트, 이미지, 링크, 폼 등의 요소를 정의하며, 이를 통해 웹 브라우저가 페이지를 올바르게 표시할 수 있게 합니다.
HTML은 마크업 언어로, 문서의 각 부분이 의미하는 바를 나타내기 위해 태그(tag)를 사용합니다.
HTML 파일은 .html 확장자로 저장되며, 브라우저를 통해 쉽게 열 수 있습니다.
HTML의 기본 구조
HTML 문서는 다음과 같은 기본 구조를 가지고 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML webpage!</p>
</body>
</html>- <!DOCTYPE html>
- HTML5 표준 문서임을 선언하는 코드입니다. 웹 브라우저가 이 문서를 올바르게 처리할 수 있도록 합니다.
- <html>
- HTML 문서의 시작과 끝을 표시하는 루트(root) 요소입니다. 모든 HTML 코드는 이 태그 안에 작성됩니다.
- <head>
- 페이지의 메타데이터(페이지 제목, 문자 인코딩 정보 등)를 포함하며, 여기의 내용은 화면에 표시되지 않습니다.
- <meta charset="UTF-8">
- 문서의 문자 인코딩을 설정합니다. UTF-8은 대부분의 언어를 지원하는 표준입니다.
- <title>
- 웹 브라우저 탭에 표시되는 페이지 제목입니다.
- <body>
- 웹 페이지에 보이는 모든 콘텐츠(텍스트, 이미지, 링크 등)가 포함되는 부분입니다. 사용자가 볼 수 있는 모든 요소는 이 태그 안에 작성됩니다.
HTML의 주요 태그
1. 제목 태그 (<h1> ~ <h6>)
- 제목을 나타내는 태그로, <h1>은 가장 큰 제목, <h6>은 가장 작은 제목을 나타냅니다
<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Title</h3>2. 단락 태그 (<p>)
- 문단을 나타내며, 주로 텍스트를 블록 형태로 표시합니다.
<p>This is a paragraph of text.</p>3. 링크 태그 (<a>)
- 하이퍼링크를 만들 때 사용하는 태그입니다. href 속성으로 링크할 URL을 지정합니다.
<a href="https://www.example.com">Go to Example Website</a>4. 이미지 태그 (<img>)
- 이미지를 삽입할 때 사용하며, src 속성에 이미지 경로를 지정하고, alt 속성에 대체 텍스트를 제공합니다.
<img src="image.jpg" alt="A beautiful scenery">5. 리스트 태그
- 순서가 있는 리스트 (<ol>)
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>- 순서가 없는 리스트 (<ul>)
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>6. 테이블 태그 (<table>)
- 표를 만들 때 사용하며, <tr>는 행(row)을, <td>는 셀(cell)을 나타냅니다.
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>7. 입력 폼 태그 (<form>)
- 사용자 입력을 받을 수 있는 폼을 만듭니다.
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>8. 주석 (<!-- -->)
- 코드에 주석을 추가하며, 브라우저에 표시되지 않습니다.
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>HTML 속성(Attribute)
각 HTML 태그는 속성을 가질 수 있으며, 속성은 태그에 추가 정보를 제공합니다. 속성은 이름과 값으로 구성됩니다.
예를 들어:
<a href="https://www.example.com" target="_blank">Example Link</a>- href: 링크의 목적지 URL을 나타냅니다.
- target="_blank": 링크를 새 창이나 새 탭에서 열도록 설정합니다.
HTML 작성 시 유의 사항
- 태그 중첩 규칙
<p>This is a <strong>bold</strong> word in a sentence.</p> - HTML 태그는 중첩될 수 있지만, 올바른 순서로 닫혀야 합니다.
- 빈 태그(Empty Tag)
- 일부 태그는 닫는 태그가 필요 없으며, 예를 들어 <img> 또는 <br>(줄바꿈) 태그가 해당됩니다.
- 유효한 문서 작성
- HTML은 W3C의 표준을 준수해 작성하는 것이 좋으며, 이를 통해 다양한 브라우저에서 웹 페이지가 제대로 표시될 수 있습니다
'EDU > Web 시작하기' 카테고리의 다른 글
| 기초 개념 정리 (쉽게) (0) | 2024.11.02 |
|---|