[html] HTML5 마크업 언어

26 Dec 2023

html

HTML5는 웹 문서를 작성하는 데 사용되는 최신 버전의 마크업 언어입니다. HTML5는 이전 버전의 HTML과 비교하여 다양한 새로운 기능과 개선된 특성을 가지고 있습니다. 이 글에서는 HTML5의 주요 기능과 예제 코드에 대해 자세히 살펴보겠습니다.

시맨틱 요소

HTML5는 시맨틱 요소를 도입하여 웹 페이지의 구조와 콘텐츠를 더 명확하게 정의합니다. 이를 통해 검색 엔진이나 스크린 리더 등이 웹 페이지를 더 잘 이해할 수 있습니다. 몇 가지 시맨틱 요소의 예시는 다음과 같습니다:

<header>
  <h1>제목</h1>
  <nav>
    <ul>
      <li><a href="#">홈</a></li>
      <li><a href="#">서비스</a></li>
      <li><a href="#">문의</a></li>
    </ul>
  </nav>
</header>

<section>
  <article>
    <h2>블로그 제목</h2>
    <p>블로그 내용...</p>
  </article>
  <article>
    <h2>블로그 제목</h2>
    <p>블로그 내용...</p>
  </article>
</section>

<footer>
  <p>저작권 정보 등...</p>
</footer>

위의 코드에서 볼 수 있듯이, <header>, <nav>, <section>, <article>, <footer> 등의 요소를 사용하여 웹 페이지의 구조를 명확하게 표현할 수 있습니다.

멀티미디어 지원

HTML5는 오디오와 비디오 같은 멀티미디어 콘텐츠 지원을 위한 새로운 태그를 도입했습니다:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="music.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio>

위의 코드는 <video>와 <audio> 태그를 사용하여 비디오와 오디오를 웹 페이지에 삽입하는 예시입니다.

폼 컨트롤 및 입력 유형

HTML5는 더 많은 폼 컨트롤 및 입력 유형을 지원합니다. 이를 통해 사용자들이 더 편리하게 웹 페이지의 폼을 작성하고 제출할 수 있습니다. 몇 가지 예시는 다음과 같습니다:

<input type="date">
<input type="email">
<input type="color">
<input type="range">

위의 코드는 각각 날짜, 이메일, 색상, 범위 등의 다양한 입력 유형을 나타냅니다.

HTML5의 이러한 기능들을 이용하여 더 풍부하고 사용자 친화적인 웹 페이지를 작성할 수 있습니다.

이상으로 HTML5의 주요 기능과 예제 코드에 대해 살펴보았습니다. HTML5의 다양한 기능들을 적극 활용하여 보다 현대적이고 효과적인 웹 페이지를 제작하는 것이 중요합니다.

목차

시맨틱 요소

멀티미디어 지원

폼 컨트롤 및 입력 유형