컴퓨터/CSS

[CSS] semantic 태그

peridott 2024. 6. 30. 17:28 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>semantic태그</title>
</head>
<body>
    <h1>semantic태그</h1>
    <h3>의미가 있는</h3>
    <ul>
        <li>html4버전에서는 div태그의 id등을 통해 내용 구분</li>
        <li>스크린리더는 영역별로 접근 불가</li>
        <li>html5버전에서는 태그의 이름으로 태그의 내용을 유추</li>
        <li>스크린리더는 영역별로 접근 가능</li>
        <li>웹접근성 향상을 위한 태그</li>
    </ul>
    <h3>사용 태그</h3>
    <pre>
        &lt;header>
            헤더부분 : 맨 상위에 위치하고, 회사 로고나 기타 헤더에 넣을 것들을 배치
        &lt;/header>

        &lt;nav>
            nav : 다른 페이지로 이동할 수 있는 네이게이션 정보. 위치가 자유롭다
        &lt;/nav>
    
        &lt;section>
            section : 연관된 컨텐츠 그룹핑
        &lt;/section>
    
        &lt;article>
            article : 실제 내용들
            - section으로 여러개의 article의 그룹핑 가능
            - article본문이 section으로 나뉠수도 있음
        &lt;/article>
    
        &lt;aside>
            aside : 본문 외의 부가정보
            - 날씨, 광고, 네비게이션
        &lt;/aside>

        &lt;footer>
            footer : 사이트 하단부분 또는 article의 하단에 위치
            - 저작권 정보, 회사정보, 네비게이션 정보 등
        &lt;/footer>
    </pre>
</body>
</html>
저작자표시 비영리 변경금지