https://youtu.be/T7h8O7dpJIg

📘 시멘틱 태그란?

• 태그 자체에 의미가 있는 태그를 말함

📘 시멘틱 태그는 왜쓰지?

• SEO : search engine optimization. 검색을 최적화 하기 위해 적절한 제목과 부제목, 시멘틱 태그들을 잘 활용하면 웹사이트의 중요한 제목과 부제목을 알고, 사람들이 검색할때 표현해주거나, 사람들이 어떤 키워드로 검색할 때 이 웹사이트를 추천해줄지를 알 수 있음
• Accessibility : 웹 페이지를 음성으로 읽어주는 스크린리더를 이용하거나, 키보드만을 이용해서 웹사이트를 이용할 때 적절한 시멘틱 태그로 잘 만든 웹사이트라면 잘 동작해야함
• 개발자 들을 위해 : 개발자가 html 코드를 봤을 때 한눈에 의미를 파악해서 사후 관리가 용이해짐

📘 <div> 대신 쓰는 대표적인 시멘틱 태그

• <header> : 웹사이트의 브랜드 로고나, 사용자들을 위한 중요한 메뉴아이템이 들어있을 때
  • 단, 헤더안에 여러가지 메뉴들이 모여있다면 <nav> 가 더 좋음
• <footer> : 웹사이트 제일 아래에 여러가지 정보나 링크시 좋음
• <main> : 현재 웹사이트에서 중요한 컨텐츠를 가지고 있는 부분
  • <aside> : 메인 안에서도 페이지와 상관없는 부가적인 내용(광고, 링크)
  • <article>
  • <section>

📕 <article> vs <section>

• <article> 은 블로그 포스트에서 포스트 하나, 신문기사에서 기사하나 등 하나 그자체를 묶어 줄때 사용. 메인 안에있는 다른 내용들과 상관없이 고유한 정보를 나타내 줄 때 사용
• <section> 은 <article> 내에서든 <main> 내에서든 연관있는 내용들을 묶어줄때 사용

📕 <i> vs <em>

• <i> 는 시각적으로만 이탤릭체
• <em> 은 시각적으로는 이탤릭체며, 스크린리더가 읽을때 강조하며 읽음. 즉 강조하는 이탤릭체!!!

📕 <b> vs <strong>

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

📕 <ol> vs <ul> vs <dl>

• <ul> 은 순서가 없는 목록을 나타낼 때. unorder list를 의미
• <ol> 은 순서가 있는 목록을 나타낼 때. order list를 의미
• <dl> 은 description list의 요소로 어떤 단어에 대한 설명을 나타낼 떄 그 목록을 나타낼 떄 사용
  • <dt> 에는 내가 설명할 단어
  • <dd> 그에 해당하는 설명

📕 <img> vs <background-image>

• <img> : 이미지가 웹페이지 안에서 하나의 중요한 요소로 자리잡고 있을 때
• <background-image> : 문서의 내용과는 별개로 스타일링 목적일 때

📕 <button> vs <a>

버튼을 쓰든 에이태그를 쓰든 css로 스타일링을 하면 둘다 버튼처럼 보여서 헷갈릴 수 있음

• <a> : 어디론가 이동할 때 (링크)
• <button> : review, vote, login, sign up now 등 사용자의 특정한 액션을 위해

📕 <table> vs CSS

• <table> : 정말 많은 양의 데이터를 행과 열을 이용해서, 정말 <table> 이 필요해서 그런 데이터를 나타내는 경우에 사용
• CSS : 단순히 아이템을 테이블 형식이나 그리드 형식으로 표현하기위한거라면 CSS 가 나음. 예전엔 CSS 가 후져서 <table> 을 이용했지만 요새는 CSS의 Flex나 Grid 를 이용함

HTML 요소 참고서