Study Record

HTML5의 문서구조 본문

웹/HTML + CSS

HTML5의 문서구조

초코초코초코 2025. 1. 31. 23:27
728x90

 

시맨틱 태그란?

문서 구조를 정의할 수 있는 새로운 요소들이 도입되어 태그만 보고도 쉽게 페이지 구조를 이해할 수 있다. 사람들이 소스를 쉽게 이해할 수 있도록 태그를 의미가 통하게, 즉 시맨틱 태그로 바뀐 것이다. 즉, 사람들이 소스를 쉽게 이해할 수 있도록 의미가 통하는이라는 영어 단어를 사용한 말로 HTML5부터 도입된 태그를 시맨틱 태그라고 한다.

 

 

레이아웃을 위한 HTML5 시맨틱 태그들

 

<header> 태그

머리말(제목)을 지정할 때 사용하는 태그이다. 특정 부분의 머리말에 해당한다. <head> 태그는 문서에서 단 한 번만 사용할 수 있고 title 이나 meta 정보가 들어가는 실제 웹 화면에 보이지 않는 내용들이다. 하지만 header 태그는 사이트 로고나 메뉴 등 실제 문서 내용이 들어있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테스트 페이지 입니다.</title>
</head>
<body>
    <header>
        <hgroup>
            <h1>Joandora</h1>
            <h2>가장 제주다운 수산리집</h2>
        </hgroup>
    </header>
</body>
</html>

 

 

<nav> 태그

같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타낸다. 웹사이트에서 내비게이션 부분인 메뉴 부분에 많이 사용된다. 위치에 영향을 받지 않는다. (ex. 네비게이션)

 

 

<hgroup> 태그

<h1>~<h6> 태그를 이용해 제목을 붙일 때, 제목과 관련된 몇 단계의 부제목이 있다면 제목과 부제목이 서로 관련이 있음을 나타내기 위해 <hgroup> 태그로 묶을 수 있다. 화면에 결과가 표시되지 않지만 문서의 구조에 있어서 편리함을 줄 수 있다.

<header>
    <hgroup>
        <h1>Joandora</h1>
        <h2>가장 제주다운 수산리집</h2>
    </hgroup>
</header>

 

 

<section> 태그

문서에서 콘텐츠 영역을 나타낸다. 콘텐츠 영역을 구분짓는 용도로 사용하고 실제 콘텐츠 내용은 <section> 태그 안에 <acticle> 태그 등을 넣어서 사용한다.

<section id="container">
    <section id="info"></section>
    <section id="portfolio"></section>
    <section id="skills"></section>
    <section id="contact"></section>
</section>

 

 

<article> 태그

실제 콘텐츠 즉 웹 상의 실제 내용을 넣는다. section 태그는 콘텐츠의 기준이라기 보다는 헤더와 섹션, 푸터와 구분하기 위한 기능상의 구분이다.

<section id="content_wrap">
    <h2>Welcome</h2>
    <article id="content_main"></article>
</section>

 

 

<aside> 태그

본문 내용 외에 주변에 표시되는 기타 내용들을 나타낸다. 흔히 블로그 등에서 왼쪽, 오른쪽 혹은 하단에 표시되는 광고나 링크 같은 사이드 바를 표시할 때 사용하는 태그이다. 필수 요소가 아니기 때문에 필요할 경우에만 사용한다.

<div id="content">
    <header id="header"></header>
    <section id="home"></section>
    <aside></aside>
</div>

 

 

<footer> 태그

제작 정보와 저작권 정보를 표시할 때 주로 사용한다. 

<footer>
    <p class="copyright">ⓒ 2011</p>
</footer>

 

 

<address> 태그

주로 <footer> 태그 안에서 사용되는데, 웹 페이지 제작자의 이름이나 제작자의 웹 페이지, 또는 피드백을 위한 이메일 주소 같은 연락처 정보를 넣는데 사용된다.

<footer>
    <p>제주 특별자치도 남제주군 성산읍 수산리</p>
    <address>yoanee@naver.com</address>
    <p> Copyright ⓒ. All rights reserved.</p>
</footer>

 

 

<div> 태그

콘텐츠를 묶어 시각적인 효과를 적용하려고 할 때, 즉 콘텐츠에 CSS를 적용할 때 <div> 태그를 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테스트 페이지 입니다.</title>
    <style>
        #wrapper{
            width: 300px;
            background-color: aqua;
            margin-right: auto;
            margin-left: auto;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        사랑합니다
    </div>
</body>
</html>

 

 

웹 브라우저 버전 고려하기

HTML5 태그를 지원하지 않는 브라우저들이 있다. 모든 사용자들이 최신 웹 브라우저를 사용하는 것은 아니기 때문에 그런 사용자들까지 고려해야 한다.

 

브라우저는 자신이 인식하지 못하는 태그를 만나게 되면 인라인 태그로 취급하게 된다. 하지만 header 태그나 article 같은 태그들은 자신만의 영역이 있어야 하는 블록 레벨 태그로 영역이 있어야 위치를 옮길 수 있다. 따라서 시맨틱 태그들은 다음과 같은 소스를 이용하여 강제로 블록 레벨 태그로 설정해줘야 한다.

<style>
    header, hgroup, section, nav, article, footer{
        display: block;
    }
</style>

 

 

*블록 레벨 요소와 인라인 요소

블록 레벨 요소는 적용했을 때 새로운 블록이 만들어지는 태그이다. 해당 태그가 적용된 부분의 앞뒤로 줄바꿈이 되는 것이다. 예를 들어, <hn>, <p>, <div>, <ul>, <ol>, <pre>, <form>, <address>, <table> 태그 등이 블록 레벨 요소이다.

반면 인라인 요소는 적용하더라도 줄바꿈이 생기지 않는 태그이다. <span>, <a>, <img>, <object>, <br>, <sub>, <sup>, <input>, <select> 태그 등이 인라인 요소이다.

 

 

* IE 8 이하 버전

다음 스크립트를 추가해준다.

<script>
    document.createElement('article');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('hgroup');
    document.createElement('nav');
    document.createElement('header');
    document.createElement('footer');
</script>

 

 

 

728x90

'웹 > HTML + CSS' 카테고리의 다른 글

웹 호스팅 서비스  (0) 2025.02.04
HTML 특수기호와 특수문자 입력하기  (0) 2025.02.04
HTML 이미지와 하이퍼링크와 앵커  (0) 2025.01.27
HTML 기본 구조와 텍스트 관련 태그  (0) 2025.01.26
HTML5과의 첫 만남  (1) 2025.01.26
'웹/HTML + CSS' Related Articles more