semantic

semantic

sementic tag는 웹 접근성(TTS), 가시성, 검색엔진 최적화 때문에 사용함

• block tag
• inline tag

 

---

block tag

block tag는 전체 영역을 사용함

header {
	border: 3px solid red;
}
nav {
	border: 3px solid yellow;
}
main {
    border: 3px solid green;
}
footer {
    border: 3px solid blue;
}
.header {
    border: 3px solid black;
}

<div class="header">Header 영역</div>
<header>Header 영역</header>
<nav>Nav 영역</nav>
<main>Content 영역</main>

 

---

inline tag

inline tag는 content가 있는 부분만 영역으로 잡힘

span {
    background-color: orange;
}

<span>요리(料理, Cooking)는 ‘요리음식점’(한성주보, 1886년 10월4일치)에 처음 나온, 조선 말 한성에 진출한 일본인들이 음식을 만들어 팔던 가게의 간판을 인용한 말로 먹기 좋게 가공한 음식이나 가공 행위 자체를 의미한다. 식재료를 가공하는 행위에는 '조리(調理)'도 명사로 쓰이지만, 음식을 보고 조리라고 부르지는 않는다.</span>

 

---

 

 

Github

Link