Semantic Tags(Markup) 개념 및 태그 정리

Semantic Tags(Markup)

 : 의미의, 의미가 있는

---

웹사이트의 구조

조금 더 의미있는 태그들을 사용하여 만들자!

드림코딩 유튜브 강의 스크린샷

<header> : 웹사이트의 브랜드를 나타내줄 수 있는 로고, 사용자들을 위한 중요한 메뉴 아이템

<nav> : 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 내비게이션 영역

<footer> : 하단에 위치, 해당 문서를 작성한 작성자 정보나, 저작권 등 부가적인 링크나 정보

<main> : 중요한 컨텐츠 영

<aside> : <main>안에서도 페이지 컨텐츠와 직접적으로 상관없는 부가적인 부분 (광고, 페이지와 연결된 다른 링크)

<article> : <main> 안에 있는 다른 내용들과 상관없이 독립적으로 고유적인 내용을 나타낼때

<section> :<article>또는 <main> 안에 연관된 내용을 묶어줄 때

---

                       <i>                     vs                  <em>

      시각적으로만 이탤릭체                  강조하는 이탤릭

---

 

              <b>                     vs                 <strong>

시작적으로만 볼드체                정말 중요할 때 강조하는 볼드

 

---

<dl> : Definition List

용어를 설명하는 목록을 만든다

내부에 두 개의 태그를 이용하여 사용하는 방식이다

<dt> :  Definiton Term 

용어의 제목을 넣을 때 사용

 

<dd> : Definition description 

용어를 설명하는 데에 사용

---

 

<button> : 사용자의 특정한 액션을 위해 사용

<a> : 사용자가 다른 페이지로 이동할 때(링크)

 

 

 

 

---