Semantic Tags(Semnatic markup)
html 태그에는 저마다의 의미가 있습니다.
예를들어 글자크기를 키워서 제목처럼 보이게 할 수 있지만 h1 태그를 이용해서 제목인것을 확인할 수 있습니다.
시멘틱 태그가 중요한 이유
1. SEO(Search Engine Optimaztion) 검색 엔진 최적화
검색을 최적화 하기위해서 적절한 시멘틱 태그를 사용해서 검색할 때 적절히 사용될 수 있습니다.
2. Accessibility 웹 접근성
웹페이지를 시각적인 것이 아니라 음성으로 읽어주는 Screen Reader를 이용하거나 키보드만을 이용해서 웹사이트를 이용하는 경우
적적한 시멘틱 태그로 만들어진 웹사이트일 경우 문제없이 동작할 수 있습니다.
3. Maintaninability
웹사이트 HTML 코드를 바라봤을때 한눈에 알아보기 쉽고 유지보수성도 더 높여서 유지보수 할 수 있습니다.
웹사이트 구조를 이루는 태그
웹사이트의 브랜드를 나타낼 수 있는 로고나 사용자들을 위한 중요한 메뉴 아이템들이 들어있다면
Header 태그를 사용하는것이 좋습니다.
Header 안에 여러가지 메뉴가 모여있다면 nav 태그를 사용하는 것이 좋습니다.
웹사이트 맨 아래에 웹사이트 부가정보나 링크들이 있다면 footer 태그를 사용하는것이 좋습니다.
현재 웹사이트에서 중요한 컨텐츠를 가지고 있는 부분은 main 태그를 사용하는 것이 좋습니다.
main 안에서도 페이지의 컨텐츠와 직접적으로 상관이 없는 부가적인 내용이 담겨있는 부분이 필요하다면 aside태그를 사용해서 광고나 이 페이지와 연관된 링크들을 나타내거나 정보들을 담아 놓는것이 좋습니다.
main 안에서도 div로 묶어서 사용하는 것보다는 article과 section을 사용한다면 더 구조적으로 웹사이트를 구성할 수 있습니다.
article 태그 VS section 태그
article 태그
블로그 포스트에서 포스트 하나, 신문기사에서 기사하나를 하나 그 자체로 묶어줄때 사용한다고 생각하면 됩니다.
article은 이 자체만으로 독립적으로 다른 페이지에 보여줬을때 문제가 없을때 사용할 수 있습니다.
즉 Main 안에있는 다른내용들과 전혀 상관없이 독립적으로 고유한 정보를 나타낼때 사용할 수 있습니다.
article 안에 많은 정보들이 들어있을때
내용들중 서로 연관있는 정보들을 묶어주고 싶을때 section 태그를 사용할 수 있습니다.
section 태그는 article 안쪽이나 Main 안쪽 아무곳에서나 연관이 있는 내용들을 하나로 묶어줄때 section을 사용할 수 있습니다.
한 페이지 안에 여러가지의 내용을 보여준다면 section별로 나누고 하나의 section 안에서 또다른 article태그를 통해서 또 다른 블로그 기사를 보여줄 수 있습니다.
i 태그 VS em 태그
<P> 협업도 <em>잘하고</em> 커뮤니케이션도 잘하는 <i>프론트엔드</i> 개발자<p>화면상에서는 동일한 이탤릭체로 표기가 되기 때문에 똑같아 보이지만 스크린리더로 읽으면 다르게 강조가 될 수 있습니다.
em태그 부분이 강조되어서 사용될 수 있습니다.
i 태그는 시각적으로 이탤릭체로 변환되고 별다른 의미가 없습니다.
em 태그는 강조하는 이탤릭체입니다.
문장에서 강조하고 싶은 이탤릭체가 있다면 em태그를 사용해야 합니다.
b 태그 VS strong 태그
협업도 잘하고 커뮤니케이션도 잘하는 프론트엔드 개발자
<P> 협업도 <b>잘하고</b> 커뮤니케이션도 잘하는 <strong>프론트엔드</strong> 개발자<p>b 태그는 시각적으로만 볼드체로 변환됩니다.
strong 태그는 중요한 강조하는 내용이 있을때 사용할 수 있는 볼드채 입니다.
