반응형
HTML 심화 학습은 웹 페이지를 더욱 구조화하고 사용성 및 접근성을 향상시키기 위한 중요한 내용입니다. 여기서는 폼 요소와 입력 타입들, 테이블 구조, 그리고 시맨틱 태그에 대해 자세히 다뤄보겠습니다.
1. 폼(Form) 요소와 입력 타입들
HTML 폼은 사용자로부터 데이터를 입력받아 서버로 전송하는 역할을 합니다. 다양한 입력 타입과 속성을 활용하여 효율적인 폼을 만들 수 있습니다.
기본 폼 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit_form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890"><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"><br><br>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>2. 테이블(Table) 구조
HTML 테이블은 데이터를 행과 열로 구조화하여 표시할 때 사용합니다. table, tr (table row), th (table header), td (table data) 태그를 사용하여 테이블을 구성합니다.
테이블 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Example</title>
</head>
<body>
<h1>Monthly Savings</h1>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
</tr>
<tr>
<td>March</td>
<td>$300</td>
</tr>
</table>
</body>
</html>3. 시맨틱(Semantic) 태그
HTML5에서는 문서의 구조를 더욱 명확하게 나타내기 위해 시맨틱 태그가 도입되었습니다. 이러한 태그들은 SEO와 접근성을 향상시킵니다.
주요 시맨틱 태그들
<header>: 문서나 섹션의 머리글을 정의합니다.<footer>: 문서나 섹션의 바닥글을 정의합니다.<nav>: 네비게이션 링크를 정의합니다.<article>: 독립적인 콘텐츠를 정의합니다.<section>: 문서의 섹션을 정의합니다.<aside>: 주요 콘텐츠와는 별도로 관련된 콘텐츠를 정의합니다.<main>: 문서의 주요 콘텐츠를 정의합니다.
시맨틱 태그 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Elements</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
<section>
<h2>Section Title</h2>
<p>This is a section.</p>
</section>
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>4. 접근성과 SEO 향상
- 접근성: 웹 페이지를 더 많은 사용자들이 쉽게 접근할 수 있도록 만드는 것입니다. 예를 들어,
<label>태그를 사용하여 폼 요소와 연결하고, 이미지에alt속성을 추가하여 시각 장애인들이 화면 읽기 프로그램을 통해 내용을 이해할 수 있게 합니다. - SEO: 검색 엔진 최적화(SEO)를 통해 웹 페이지가 검색 결과에서 더 잘 보이도록 합니다. 시맨틱 태그를 사용하고, 적절한 메타데이터를 추가하며, 올바른 HTML 구조를 유지하는 것이 중요합니다.
반응형
'Frontend > HTML' 카테고리의 다른 글
| [HTML] HTML 규칙 (0) | 2024.06.08 |
|---|---|
| [HTML] HTML 예제 (0) | 2024.06.08 |
| [HTML] HTML 기본 (0) | 2024.06.08 |