HTML 입문 문법

HTML HTML5 새로운 요소

HTML HTML5 새로운 요소 — 초급

HTML5 새로운 요소

1. 도입 (왜 배워야 하는가)

HTML5는 웹 표준의 새로운 시대를 열었습니다. 이전 버전의 HTML에 비해 더 많은 기능과 요소를 제공하여 웹 페이지를 보다 구조적이고 의미 있게 만들 수 있습니다. 실무에서 HTML5의 새로운 요소를 이해하지 못하면, 웹 페이지의 접근성과 사용자 경험이 떨어질 수 있습니다. 예를 들어, <article>이나 <section> 요소를 사용하지 않으면, 검색 엔진 최적화(SEO)나 스크린 리더와 같은 보조 기구에서 페이지의 내용을 제대로 이해하지 못할 수 있습니다.

2. 핵심 개념 설명

HTML5에서 추가된 주요 요소들은 웹 페이지의 의미를 보다 명확히 전달하는 데 도움을 줍니다.

요소	설명
`<article>`	독립적으로 구분되는 콘텐츠 블록을 나타냅니다.
`<section>`	주제별로 콘텐츠를 구분하는 섹션을 나타냅니다.
`<header>`	문서나 섹션의 머리말을 나타냅니다.
`<footer>`	문서나 섹션의 바닥글을 나타냅니다.
`<nav>`	내비게이션 링크를 나타냅니다.

비유: HTML5의 새로운 요소들은 책의 목차와 같습니다. 목차를 통해 독자는 책의 내용을 쉽게 이해하고, 필요한 정보를 빠르게 찾을 수 있습니다.

3. 기본 코드 예제

다음은 HTML5의 기본 요소인 <article>, <section>, <header>, <footer>를 사용하는 간단한 예제입니다.

<!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>
    <section>
        <article>
            <h2>첫 번째 글</h2>
            <p>이것은 첫 번째 글의 내용입니다.</p>
        </article>
        <article>
            <h2>두 번째 글</h2>
            <p>이것은 두 번째 글의 내용입니다.</p>
        </article>
    </section>
    <footer>
        <p>저작권 © 2023 나의 블로그</p>
    </footer>
</body>
</html>

실행 결과:

페이지 상단에 "나의 블로그"라는 제목이 보이고,
두 개의 글이 각각 제목과 내용으로 나타납니다.
페이지 하단에 저작권 정보가 표시됩니다.

코드 한 줄씩 동작 설명:

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html lang="ko">: 문서의 언어를 한국어로 설정합니다.
<head>: 문서의 메타 정보를 담고 있는 섹션입니다.
<body>: 웹 페이지의 본문을 정의합니다.
<header>: 페이지의 머리말을 정의합니다.
<section>: 여러 개의 관련 콘텐츠를 포함하는 섹션입니다.
<article>: 독립적인 콘텐츠 블록입니다.
<footer>: 페이지의 바닥글을 정의합니다.

4. 실전 활용 예제

예제 1: 블로그 포스트

블로그를 만들 때, 각각의 포스트는 <article> 요소로 감싸서 독립적인 콘텐츠로 표현할 수 있습니다.

예제 2: 웹사이트 내비게이션

웹사이트의 내비게이션 메뉴를 <nav> 요소로 감싸면, 검색 엔진과 스크린 리더들이 내비게이션 링크를 쉽게 인식할 수 있습니다.

<nav>
    <ul>
        <li><a href="#home">홈</a></li>
        <li><a href="#about">소개</a></li>
        <li><a href="#contact">연락처</a></li>
    </ul>
</nav>

예제 3: 정보 구조화

뉴스 사이트에서는 <section> 요소로 각 기사를 주제별로 나누어 사용하여 사용자가 더 쉽게 정보를 찾을 수 있습니다.

5. 흔한 실수와 주의사항

실수 1: `<div>` 대신 `<article>` 사용하지 않기

잘못된 코드:

<div>
    <h2>제목</h2>
    <p>내용</p>
</div>

올바른 코드:

<article>
    <h2>제목</h2>
    <p>내용</p>
</article>

주요 포인트: 콘텐츠의 의미를 명확히 전달하기 위해 적절한 요소를 사용해야 합니다.

실수 2: 요소 중첩 문제

잘못된 코드:

<header>
    <section>
        <h1>제목</h1>
    </section>
</header>

올바른 코드:

<header>
    <h1>제목</h1>
</header>

주요 포인트: <header> 내부에는 일반적으로 제목이나 로고만 포함되어야 합니다.

6. 정리

HTML5의 새로운 요소들은 콘텐츠의 의미를 더 명확하게 전달합니다.
<article>, <section>, <header>, <footer> 등의 요소는 웹 접근성과 SEO에 도움을 줍니다.
웹 페이지의 구조를 이해하고 적절한 요소를 사용하는 것이 중요합니다.

다음에 학습하면 좋은 주제: CSS Flexbox와 Grid - 레이아웃을 구성하는 데 있어 유용한 기술입니다.

학습