Semantic HTML을 사용하는 이유?
1. 접근성
모바일도 웹 접근이 쉬움.
스크린 리더가 코드를 쉽게 해석할 수 있음.
**스크린 리더: 시각 장애인이 컴퓨터를 사용할 수 있도록, 화면에 나타난 내용과 키보드로 입력한 정보, 커서의 좌표 따위를 음성으로 알려 주는 프로그램 또는 장치)
2. 검색엔진 최적화 (Search Engine Optimization)
검색엔진이 사이트 콘텐츠를 더 정확하게 파악하여 사용자 트래픽을 늘릴 수 있음.
3. 쉬운 이해도
다른 개발자들이 읽기 쉬움 Semantic TAG
1. <header>, <nav>, <main>, <footer>
기본틀
-header: 탐색 링크 또는 소개 콘텐츠
-nav: 탐색 링크
-main: 대부분의 콘텐츠
-footer: 연락 정보, 저작권 정보, 이용 약관, 사이트 맵, 페이지 상단 링크 참조
2. <section>
Chapters, headings 등 유사 theme
3. <article>
기사, 블로그, 코멘트 같은 컨텐츠
자체적으로 의미가있는 콘텐츠를 보유
4. <aside>
메인 콘텐츠와는 별개 정보. 다른 요소를 강화하지만 주요 내용을 이해하는 데 필요한 것은 아님.
참고 문헌, 미주, 코멘트, 인용문 가져 오기, 편집 사이드 바, 추가 정보
5. <figure>
모든 미디어 포함 (사진, 음악, 비디오)
6. <figcaption>
figure 설명
7. <video> <embed> <audio>
미디아 파일 관련
Reference: Codecademy
repl.it Question
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. < img > 태그를 사용하는 것과 < div > 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
Semantic tag < img >를 사용할 경우 이미지 로딩이 실패해도 다른 개발자가 이미지인지 아닌지 텍스트로 쉽게 판단할 수 가 있다. 개발자의 의도를 명확히 알 수 있어 다른 개발자가 해석하기 쉽기 때문에 유지보수 또한 쉽다. 무엇보다 semantic tag를 쓸 경우 검색 엔진은 웹 사이트의 콘텐츠를 더 잘 식별하고 가장 중요한 콘텐츠에 적절한 가중치를 부여 하여 웹 사이트의 traffic flow를 높일 수 있다.
반면 쉽게 식별이 가능하기 때문에 웹 사이트를 직접 방문할 필요 없이 정보를 캘 수 있다. 또한, 가장 문제되는 개인/개인정보 유출이 더 쉬워진다.
이러한 이유 때문에 목적에 따라 semantic 혹은 non-semantic 태그를 사용할지 개발자가 판단해야한다.
Entrepreneurs Should Learn to Code