시맨틱 HTML과 폼
시맨틱 HTML이란?
시맨틱(Semantic) HTML은 태그 이름만으로 콘텐츠의 의미를 전달하는 작성 방식입니다. 대신 , , , , , 등을 사용하면 검색 엔진과 스크린 리더가 페이지 구조를 더 잘 이해할 수 있습니다.<header>
<nav>
<a href="/">홈</a>
<a href="/about">소개</a>
<a href="/contact">연락처</a>
</nav>
</header>
<main>
<article>
<h1>시맨틱 HTML의 중요성</h1>
<p>시맨틱 태그는 접근성과 SEO를 동시에 개선합니다.</p>
<section>
<h2>접근성 향상</h2>
<p>스크린 리더가 페이지 구조를 파악하여 사용자에게 안내합니다.</p>
</section>
<section>
<h2>SEO 최적화</h2>
<p>검색 엔진이 콘텐츠의 중요도와 관계를 이해합니다.</p>
</section>
</article>
<aside>
<h3>관련 글</h3>
<ul>
<li><a href="#">HTML5 새로운 태그</a></li>
<li><a href="#">웹 접근성 가이드</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 My Website</p>
</footer> - 페이지나 섹션의 머리글 영역 - 내비게이션 링크 모음 - 페이지의 주요 콘텐츠 (문서당 하나) - 독립적인 콘텐츠 단위 (블로그 글, 뉴스 기사) - 주제별로 묶인 콘텐츠 그룹 - 주요 콘텐츠와 간접적으로 관련된 부가 정보 - 페이지나 섹션의 바닥글 영역HTML 폼 만들기
태그는 사용자 입력을 수집하는 데 사용됩니다. 다양한 타입과 , , 등을 조합하여 로그인, 회원가입, 검색 등의 폼을 만들 수 있습니다.<form action="/submit" method="POST">
<!-- 텍스트 입력 -->
<label for="username">이름</label>
<input type="text" id="username" name="username"
placeholder="이름을 입력하세요" required />
<!-- 이메일 입력 (형식 자동 검증) -->
<label for="email">이메일</label>
<input type="email" id="email" name="email"
placeholder="example@mail.com" required />
<!-- 비밀번호 -->
<label for="password">비밀번호</label>
<input type="password" id="password" name="password"
minlength="8" required />
<!-- 셀렉트 박스 -->
<label for="role">역할</label>
<select id="role" name="role">
<option value="">선택하세요</option>
<option value="student">학생</option>
<option value="developer">개발자</option>
<option value="designer">디자이너</option>
</select>
<!-- 라디오 버튼 -->
<fieldset>
<legend>경험 수준</legend>
<label>
<input type="radio" name="level" value="beginner" /> 입문
</label>
<label>
<input type="radio" name="level" value="intermediate" /> 중급
</label>
<label>
<input type="radio" name="level" value="advanced" /> 고급
</label>
</fieldset>
<!-- 체크박스 -->
<label>
<input type="checkbox" name="agree" required />
이용약관에 동의합니다
</label>
<!-- 텍스트 영역 -->
<label for="bio">자기소개</label>
<textarea id="bio" name="bio" rows="4"
placeholder="간단한 자기소개를 작성하세요"></textarea>
<!-- 제출 버튼 -->
<button type="submit">가입하기</button>
</form>의 for 속성과 의 id를 일치시키면 라벨 클릭 시 해당 입력 필드에 포커스됩니다. required, minlength, pattern 등의 속성으로 브라우저 내장 유효성 검사를 활용하세요. JavaScript 없이도 기본적인 폼 검증이 가능합니다.