[html] HTML5로의 웹 사이트 제작

22 Dec 2023

html

HTML5는 웹 개발자들이 웹 사이트를 구축하고 디자인하는 데 사용하는 가장 최신의 웹 표준입니다. 이 표준은 이전의 HTML 버전에서 제공하는 기능을 개선하고 새로운 기능을 추가하여 웹 애플리케이션 및 콘텐츠를 보다 효과적으로 개발할 수 있는 기회를 제공합니다.

HTML5의 주요 기능

HTML5의 몇 가지 주요 기능은 다음과 같습니다:

시멘틱 마크업: 새로운 시맨틱 요소들을 사용하여 더 의미 있는 웹 페이지를 만들 수 있습니다.
멀티미디어 지원: 오디오, 비디오 등의 멀티미디어를 쉽게 추가할 수 있습니다.
오프라인 애플리케이션: 오프라인 시나리오에서도 작동하는 웹 애플리케이션을 만들 수 있습니다.
그래픽 및 이펙트: Canvas 및 SVG 요소를 활용하여 풍부한 그래픽 및 이펙트를 구현할 수 있습니다.
개선된 폼 제어: 다양한 입력 유형과 데이터 유효성을 처리할 수 있는 폼 제어 기능을 제공합니다.

HTML5로의 웹 사이트 제작 예시

다음은 HTML5로 제작된 간단한 웹 페이지의 예시입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 웹 페이지 예시</title>
</head>
<body>
    <header>
        <h1>웹 페이지 제목</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h2>글 제목</h2>
            <p>글 내용...</p>
        </article>
    </section>
    <footer>
        <p>&copy; 2023 웹 페이지</p>
    </footer>
</body>
</html>

이 예시는 시멘틱 마크업을 활용하여 header, nav, section, article, footer 등의 요소로 페이지를 구성하고 있습니다.

HTML5는 웹 페이지의 구조를 보다 명확하게 정의하고, 멀티미디어를 통합함으로써 웹 개발자가 더 다양하고 풍부한 웹 경험을 제공할 수 있게 해줍니다.

참조: MDN web docs