웹 개발자가 알아야 할 HTML5 기능 10가지

웹 개발자가 알아야 할 HTML5 기능 10가지에 대해 알려드리겠습니다. 간단한 페이지를 만들거나 동적인 웹 어플리케이션을 구축할 때 기본적으로 html5 기능에 대해 익혀 두는 것은 개발자에게 중요한 일입니다. 웹 개발 제작 시 유용성, 접근성, 성능 등을 끌어 올려 줄 수 있는 10가지의 기능을 참고해 보시기 바라겠습니다.

HTML5 기능 10가지 정리

1. 의미 요소

html5에는 문서의 각 섹션의 목적을 명확하게 정의할 수 있는 ‘의미 태그’들이 몇 가지 있습니다. <header>, <footer>, <article>, <section> 등 이러한 태그들은 웹페이지의 가독성과 SEO에 중요한 역할을 해줍니다.

<header>
    <h1>Welcome to My Site</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
</header>
<section>
    <h2>Latest Articles</h2>
    <p>Explore our most recent posts below.</p>
</section>
<footer>
    <p>&copy; 2024 My Site</p>
</footer>

2. 캔버스

<canvas> 태그를 이용하면 자바스크립트(javascript)를 사용해 그래픽을 만들 수 있는데요. 타사 플러그인에 의존하지 않고 차트, 게임 등의 시각적 요소를 만드는 데에 유용하게 쓰입니다.

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(50, 50, 200, 100);
</script>

3. 오디오 및 비디오

<audio> 및 <video> 태그를 사용해서 다양한 오디오와 비디오 콘텐츠를 쉽게 삽입할 수 있습니다. 따로 플러그인 없이도 이용할 수 있어서 알아두면 용이합니다.

<video controls>
    <source src="example.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

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

4. 위치정보 API

위치정보 API는 유저의 지리적 위치에 접근할 수 있으며 ‘위치 기반 서비스’를 운영할 때 활용될 수 있습니다.

<button onclick="getLocation()">Get My Location</button><p id="location"></p><script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition((position) => {
                document.getElementById("location").innerHTML =
                    `Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`;
            });
        } 
      else {
            document.getElementById("location").innerHTML = "Geolocation is not supported by your browser.";
        }
    }
</script>

5. 로컬 및 세션 저장소

html5는 쿠키(cookies)에 의존하지 않고도 브라우저 상에 데이터를 저장하기 위해서 ‘localstorage’나 ‘sessionstorage’를 제공해 줍니다.

<script>
    // Storing data in localStorage
    localStorage.setItem("username", "JohnDoe");

    // Retrieving data
    const username = localStorage.getItem("username");
    console.log(username); // Outputs: JohnDoe</script>

6. 반응형 이미지

<picture> 태그는 화면 크기 및 해상도에 따라 다양한 반응형 이미지를 제공하여 적용할 수 있습니다.

<picture>
    <source srcset="image-large.jpg" media="(min-width: 800px)">
    <source srcset="image-small.jpg" media="(max-width: 799px)">
    <img src="image-default.jpg" alt="Responsive Image"></picture>

7. 양식 입력

이메일이나 날짜(email, url, date) 등과 같은 사용자 친화적인 양식을 사용할 수 있는 ‘placeholder 태그가 있습니다.

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required>
    <button type="submit">Submit</button></form>

8. 드래그 앤 드롭

드래그 앤 드롭 API를 활용해서 사이트 유저가 브라우저 내에서 요소를 드래그 할 수 있습니다.

<div id="dragItem" draggable="true" ondragstart="drag(event)">Drag Me</div>
<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">Drop Here</div>
<script>
    function allowDrop(event) {
        event.preventDefault();
    }
    function drag(event) {
        event.dataTransfer.setData("text", event.target.id);
    }
    function drop(event) {
        event.preventDefault();
        const data = event.dataTransfer.getData("text");
        event.target.appendChild(document.getElementById(data));
    }
</script>

9. 웹소켓

웹소켓(websocket)은 클라이언트와 서버 간의 실시간 통신을 할 수 있으며 채팅 앱이나 실시간 알림 등에 필수로 포함되게 됩니다.

<script>
    const socket = new WebSocket("ws://example.com/socket");

    socket.onopen = () => {
        console.log("Connection established");
        socket.send("Hello Server!");
    };

    socket.onmessage = (event) => {
        console.log("Message received:", event.data);
    };
</script>

10. 마이크로 데이터

마이크로 데이터는 Html에 구조화된 데이터를 포함하는 방법을 제공할 수 있고 검색 엔진이나 리치 스니펫 기능을 높여줍니다.

<article itemscope itemtype="https://schema.org/Article">
    <h1 itemprop="headline">Top 10 HTML5 Features</h1>
    <p itemprop="author">Written by Cherry</p>
    <p itemprop="datePublished">Published on November 29, 2024</p></article>

총 정리

위에서 소개한 10가지의 html5 기능을 참고하면 웹 개발 시 더 편리하고 효율적으로 사용될 수 있습니다. 많은 종류 중 일부이기 때문에 단순 참고로 이용하시면 좋을 것 같습니다.

HTML5 기능 FAQ