HTML - 구조 관련 요소 알아보기

웹 공부일지

HTML - 구조 관련 요소 알아보기 본문

MarkUp

HTML - 구조 관련 요소 알아보기

개발자로 거듭나기 2022. 8. 12. 17:52

HTML 구조 관련 요소

구조 태그들은 다음과 같습니다.

코드로 설명드리겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구조 요소</title>
</head>
<body>
    <header>
        <h1><a href="#">반응형웹</a></h1>
        <nav>
            <ul>
                <li><a href="#">MENU01</a></li>
                <li><a href="#">MENU02</a></li>
                <li><a href="#">MENU03</a></li>
                <li><a href="#">MENU04</a></li>
                <li><a href="#">MENU05</a></li>
            </ul>
        </nav>
    </header>
    <div class="container">
        <section>
            <h2>콘텐츠 그룹01</h2>
        </section>
        <section>
            <h2>콘텐츠 그룹02</h2>
        </section>
        <article>
            <h2>주요기사</h2>
        </article>
        <aside>광고</aside>
    </div>
    <footer>
        <address>경기도 부천시 오정구 삼정동 032)674-5685 icoxpub@naver.com</address>
        <p>COPYRIGHT c right reserved.</p>
    </footer>
</body>
</html>

결과

정리

요소 유형	태그명	태그의 의미 및 특징
블록 레벨 요소	<header> </header>	1. HTML 문서의 헤더 형역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용 들을 포함할 수 있습니다.
	<header> </header>	2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <header> <FOOTER> 태그는 포함할 수 없습니다.
	<section> </section>	1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화 해주는 태그이며 섹션 주제에 대한 제목요소(h2~h6)를 포함하는 것이 좋습니다.
	<section> </section>	2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
	<footer> </footer>	1. HTML 문서의 푸터 영역을 의미하는 태그로 섹션 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 있습니다.
	<footer> </footer>	2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있지만 header, footer 태그는 포함할 수 없습니다.
	<nav> </nav>	1. HTML 문서의 메인 메뉴나 목차 등을 정의해 주는 태그입니다.
	<nav> </nav>	2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 없습니다.
	<article> </article>	1. HTML 문서 내에서 독립적으로 배포 또는 재사용이 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그이며 제목요소 (h2~h6)를 포함하는 것이 좋습니다.
	<article> </article>	2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
	<aside> </aside>	1. 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며 HTML 문서의 오른쪽이나 왼쪽의 사이드 메뉴나 광고 등의 영역으로 사용됩니다.
	<aside> </aside>	2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.

'MarkUp' 카테고리의 다른 글

정규식 표현 맛보기 (7)	2022.08.16
CSS 미디어 쿼리 알아보기 (8)	2022.08.13
CSS 기본과 사용법을 알아보자! (5)	2022.08.12
비트맵과 벡터의 차이는 무엇일까? (13)	2022.08.09
웹 표준, 웹 호환성, 웹 접근성을 알아보자! (10)	2022.08.08