헷갈리는 HTML 태그들

▶︎ Semantic Tags

의미의, 의미가 있는

HTML에 Semantic Tags를 사용하는 이유

• SEO (검색엔진최적화)
• Accessibility (웹 접근성)
  • ex) 스크린리더 

    ---

▶︎ article / section

<article>

• 신문에서 기사 하나, 블로그 포스트에서 포스트 하나
• 이 자체만으로 독립적으로 다른페이지에 보여졌을 때 전혀 문제가 없을 때 사용할 수 있음
  • 메인 안에 있는 다른 내용들과 전혀 상관없이, 고유한 정보르 나타낼 때

<section>

• <article>안에서 연관된 내용을 묶어 줄 때 사용함
• 연관 있는 내용을 보여줄 떄 사용

<main> 
	<section> 
		<article></article> 
	</section> 
    <section></section> 
</main>

<main> 
    <article> 
        <section></section> 
        <section></section> 
    </article> 
</main>

---

▶︎ i / em

둘 다 동일한 이탤릭체로 표시됨
스크린 리더로 읽게 된다면?

• <i> : 시각적으로만 이탤릭체
• <em> : 강조하는 이탤릭체

  ---

▶︎ b / strong

• <b> : 시각적으로만 볼드체
• <strong> : 정말 중요한 강조하는 볼드체

  ---

▶︎ ol / ul / dl

• <ul> : 숫자가 없는 목록을 나타낼 때(단순히 목록으로만 나타낼 때)
• <ol> : 숫자가 있는 목록을 나타낼 때(순서가 중요)
• <dl> : description list > 어떤 단어에 대해서 설명이 있을 때(정의, 설명 목록)
  • <dt> : description term > 설명하고자 하는 단어(원하는 단어)
  • <dd> : description detail > 그에 해당하는 설명
  • <dl> <dt>HTML</dt> <dd>하이퍼링크 텍스트 마크업 언어</dd> <dt>JS</dt> <dd>동적으로!</dd> </dl>

---

▶︎ img / background-img

• <img> : 이미지가 페이지에서 하나의 중요한 요소로 자리 잡고 있을 떄, 이미지 태그 이용해 HTML 문서 안에서 자체적으로 포함되게 만드는 것이 중요
• background-image : 문서의 일부분이 아닐 경우, 스타일링 목적으로 사용되는 경우

  ---

▶︎ button / a

• <button> : 특정한 액션을 위해
• <a> : 어디론가 이동할 때 (링크)

  ---

▶︎ table / CSS (flex, grid)

• <table> : (행 + 열) 데이터!
• CSS : Flex, Grid

문서안에서 자체적으로 의미있는 태그가 필요한 것인지

CSS로 스타일링을 위해서 태그를 사용하는지 생각해보기