[HTML] 시멘틱 구조 태그

커뮤니티 페이지 클론 프로젝트를 하다가 <div> 태그만 남발하게 되어서 한 번 정리를 해봐야겠다고 생각하여 글을 쓰게 되었다.

---

시멘틱 구조 태그

(Semantic tag)

자주 쓰이는 태그들을 대신해서 나온 의미론적인 구조 태그

아래에서는 자주 쓰는 태그들의 자세한 설명을 서술한다.

 

<article>

독립적인 콘텐츠 유닛을 나타내기 위해 사용

→ 추후에 개별적으로 추출하거나 재사용할 수 있는 것

• 가독성을 높이고 구분하기 위해 사용 함

ex) 댓글, 블로그 글, 상품 설명 …

**<article** class="comment"**>**
    <p>
        댓글입니다.
    </p>
    <footer>
        <p>작성자: kiki</p>
        <time datetime="2025-02-21">2025년 2월 21일</time>
    </footer>
**</article>**

 

<section>

문서, 애플리케이션의 일반적인 영역

• 적당히 붙일 태그는 없지만 영역은 구분하고 싶을 때 사용

<article>
    <h1>최신 레시피 컬렉션</h1>
    <p>이번 주의 최고의 레시피를 소개합니다.</p>
    **<section>**
        <h2>맛있는 식사</h2>
        <p>정말 맛있는 마라탕과 꿔바로우</p>
    **</section>**
    **<section>**
        <h2>가성비 식사</h2>
        <p>가성비 식사에는 김밥에 라면!</p>
    **</section>**
</article>

💟<article>과 <section>의 차이

• <article> : 독립적으로 재사용이 가능한 것
• <section> : 딱히 붙일 태그는 없지만 영역을 구분하고 싶을 때

 

<header>

웹 페이지나 컨텐츠의 서두를 나타낼 때 사용

• Global header를 나타낼 때는 role=”banner” 사용
• 하나의 html 파일이 여러 개의 헤더를 가질 수 있음

✅ 중첩이 불가하다.

<header role="banner">
    <h1>웹사이트 제목<h1>
    .... 로고, 네비게이션, 검색....
</header>

 

<form>

데이터를 제출하기 위한 웹 양식 영역

✅ 중첩이 불가하다.

<사용 이유>

• 정보 입력 후 제출을 버튼을 누르지 않고 enter키 눌러서 제출 가능
• 자동완성 기능과 같은 기능 제공
• 역할표

<input type="email">

태그 내부에서 쓰면 여러 속성을 제공한다.

• 키패드 팝업 시 @와 . 이 포함된 키패드 제공
• 기본적인 유효성 검사
  • 강화하고 싶으면
    pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$
    

    

  • required
    

    

<input type="password">

입력하는 글자가 안 보이게 함

 

<h1> ~ <h6>

제목을 나타낸다.

• 고유의 폰트 속성을 가진다

(속성 aria-level=”#”이랑 같다)

 

<lable>

UI를 제공하는 컨트롤 요소들의 이름표 역할

• 특별한 기능을 하는 건 아님

🚫 버튼 요소의 이름표로 사용 금지!

 

<사용 이유>

• for 속성과 연결된 컨트롤 요소의 id 를 매칭해서, 그 요소의 이름표 임을 명시한다.
• 요소만 클릭해도 연결된 요소가 동작(체크 박스 체크, 인풋 커서) 된다.

<label for="user-checking">저를 클릭하세요.</label>
<input type="checkbox" id="user-checking">

<label>
    저를 클릭하세요.
    <input type="checkbox">
</label>

 

 

<input>

입력을 받을 수 있다

• HTML5에서는 닫는 태그가 필요없다.
• XHTML에서는 모든 태그는 닫혀야 하므로 <input/>이 쓰이기는 한다