Semantic markup : 기계가 잘 이해할 수 있도록 의미론적으로 코드를 짜는 것

어떻게 코드를 짜야 브라우저가 잘 이해할 수 있을까?

• 의미에 맞게
• 구조적으로
• 사람도 이해하기 쉽게

(1) 시멘틴 마크업 예시 (1)

<b>굵은</b>

<strong>중요한</strong>

• 위의 코드는 단순히 굵게 하는 건데, 아래의 코드는 중요한 내용으로 지정하는 것이기 때문에 더욱 시멘틱한 마크업이라고 할 수 있다.

(2) 시멘틴 마크업 예시(2)

<s>5000원</s>
<b>500원</b>

<del>5000원</del>
<b>500원</b>

• 위아래 코드는 똑같이 보여지지만, 위의 코드는 2개의 가격이 존재하고 첫번째 거에 가운데 선이 있는 상태
• 아래 코드는 1개의 가격이 존재하고, 첫번째 거는 취소된 가격

<aside> 💡 <article>

</aside>

<aside> 💡 <aside>

</aside>

<aside> 💡 <fig caption>

</aside>

<aside> 💡 <fig caption>

</aside>

<aside> 💡 <footer>

</aside>