반응형

시멘틱태그를 왜 쓰냐면 다른 사람이 작업할 때 보기 쉽고

내가 유지보수할 때 하기 쉬우라고 만들어놓은 거라고 생각하시면됩니다.

📝HTML5 <section> 태그

문서에서 특정 구역을 나타낼때 쓰입니다.

 

📝HTML5 <article> 태그

말 그대로 기사에 관련된 거라든가 그와 유사한걸 나타날때 쓰입니다.

  1. 포럼관련 포스트
  2. 블로그 포스트
  3. 뉴스기사

 

📝HTML5 <header> 태그

말 그대로 헤더 위에 부분을 가르킵니다. 어떤 영역안에 헤더가 또 있을 수도 있습니다.

 

📝HTML5 <footer>태그

말 그대로 푸터 밑에 부분을 가르킵니다. 어떤 영역안에 푸터가 또 있을 수도 있습니다.

 

📝HTML5 <nav> 태그

navigationBar를 의미합니다. 어떤 영역안에 nav가 또 있을 수도 있습니다.

 

📝HTML5 <aside> 태그

사이드바와 같은 걸 의미합니다. 어떤 영역안에 aside가 또 있을 수도 있습니다.

 

📝HTML5 <main> 태그

문서의 주요 본문 내용이 들어갑니다. 어떤 영역안에 main이 또 있을 수도 있습니다.

 

 

그 외에 것들 입니다. 제가 자주 쓰는 것들 7가지를 소개했습니다.

<article> 기사를 정의
<aside> 주요페이지의 컨텐츠에서 분리될 정보를 정의
<details> 보이거나 숨길 수 있는 추가적인 정보
<figcaption> <figure>요소에 캡션정의
<figure> 일러스트나,다이어그램, 사진, 코드등과 같이 독립적인 컨텐츠 정의
<footer> 문서의 하단영역
<header> 문서의 상단영역
<main> 문서의 주요본문내용
<mark> 중요표시된 텍스트
<nav> 메뉴링크 영역
<section> 문서의 특정 구역
<summary> <detail>의 제목부분
<time> 날짜와 시간을 정의

 

<!DOCTYPE html>
<html lang="en">
<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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
        *{
            border-color:black;
            margin:5px;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div>
        안녕
    </div>
    <header>
        안녕
    </header>
    <article>
        안녕
    </article>
    <aside>
        안녕
    </aside>
    <nav>
        안녕
    </nav>
    <main>
        안녕
    </main>
    <footer>
        안녕
    </footer>
    <br>
    <header>
        안녕
    </header>
    <article>
        안녕
    </article>
    <aside>
        안녕
    </aside>
    <nav>
        안녕
    </nav>
    <main>
        안녕
    </main>
    <footer>
        안녕
    </footer>
    
</body>
</html>

이걸 보시면 모두 여러번 사용이 가능하며 div와 동일한형태를 가지는 것을 알 수 있습니다.

반응형

'[HTML && CSS] > [HTML]' 카테고리의 다른 글

[HTML] <Meta> 태그  (0) 2023.12.10
[HTML] select 태그, iframe 태그, button vs input  (0) 2021.06.21
[HTML] input태그  (0) 2021.06.21
[HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td)  (0) 2021.06.21
[HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그  (0) 2021.06.21

티스토리툴바