시멘틱 태그

2019. 5. 10. 15:05·🎬 HTML

 

시멘틱 태그의 종류

  1. <header> - 사이트의 이름 등과 같이 웹페이지의 머리부분을 나타내는 영역을 지정하는 태그
  2. <nav> - 메뉴나 하이퍼링크 모음 등을 나타내는 영역을 지정하는 태그
  3. <section> - 주요 내용을 나타내는 영역을 지정하는 태그, <article>로 세분화 될 수 있다.
  4. <article> - <section>을 세분화하여 지정하는 태그
  5. <aside> - 주요 내용이 아닌 부가적인 내용을 나타내는 영역을 지정하는 태그
  6. <footer> - 웹페이지의 정보 등 페이지 하단에 출력되는 내용을 나타내는 영역을 지정하는 태그

기타 시멘틱 태그

<time> - 날짜와 시간 표현에 의미를 주고자 할 때 사용하는 태그, datetime 속성을 사용할 수 있다.

<details> - 디스클로저 위젯을 생성하는 태그, open 속성을 사용하여 세부 요소를 출력할 시기를 결정할 수 있음

<summary> - <detalis>의 하위 요소로 나타내거나 숨기기 위해 클릭하는 대상을 지정하는 요소이다.

 

 

실행 결과

 

'🎬 HTML' 카테고리의 다른 글

CSS의 기초  (0) 2019.05.10
오디오와 비디오  (0) 2019.05.10
폼 관련 태그  (0) 2019.05.10
'🎬 HTML' 카테고리의 다른 글
  • CSS의 기초
  • 오디오와 비디오
  • 폼 관련 태그
Baeg-won
Baeg-won
  • Baeg-won
    좋았다면 추억이고 나빴다면 경험이다.
    Baeg-won
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 🍃 Spring, Spring Boot
        • 스프링 프레임워크 기초
        • 스프링 핵심 원리 - 기본편
        • 자바 ORM 표준 JPA 프로그래밍 - 기본편
        • 스프링 MVC
        • 실전! 스프링 부트와 JPA 활용1 - 웹 애플리..
      • 🥑 Web Technoloy
      • 🚗 Backend Toy Project
        • 스프링 부트 게시판
        • Photogram
        • Baeg-won Clothing Gallery
      • 🥇 Problem Solving
        • Breadth-First Search
        • Depth-First Search
        • Backtracking
        • Simulation
        • Two-pointer
        • Binary Search
        • Greedy
        • Dynamic Programming
        • Minimum Spanning Tree
        • Dijkstra
        • Floyd warshall
      • ☕ Java
        • 명품 자바 에센셜
        • Applications
      • 🍦 JavaScript
        • JavaScript 기초
      • 🐧 Linux
        • 이것이 리눅스다(CentOS 8)
      • 📟 Database
        • 혼자 공부하는 SQL
      • 🧬 Data Structure
      • 🎬 HTML
      • 🎤 Tech Interview
      • 📌 etc
        • Unity 2D Raising Jelly Game
        • C++
        • 영어 쉐도잉
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Baeg-won
시멘틱 태그
상단으로

티스토리툴바