[HTML] 시멘틱 태그

기록의 목적 : 잊으면 다시 보기 위해서,하찮은 내 정보가 누군가한테 도움이 되기를 바라며 정리합니다.

 

 

 

시멘틱 태그

직역하면 의미가 있는 태그를  말합니다. 

 

◯ 시멘틱 태그 장점

시멘틱 태그의 장점은 내가 만든 페이지가 잘 보일 수 있게 노출을 잘 시켜주기 위해서입니다. 그걸 전문 용어로 SEO(Search Engine Optimization) 합니다. 또 차별 없이 웹을 이용할 수 있도록 음성으로 읽어 주는 기능이 잘 작동하려면 시멘틱 태그를 잘 사용하면 됩니다. 그리고 마지막으로 div만 주야장천 사용하면 어디 구간인지 분간하기 어렵습니다 그걸 막기 위해 시멘틱 태그로 구역을 나누어서 사용하면 보수하거나 유지하기 편합니다.

 

◯ 사용 방법

시멘틱 태그들을 적절한 위치에 잘 사용하면 됩니다. 정해진 틀은 없습니다. 단 위쪽은 HEADER가 오고 맨 아래는 FOOTER 태그가 온다고 보시면 됩니다.

 

▶header : <nav>, 로고,   검색창 등을 품고 있습니다.

▶container : 가장 상위에 있다고 보시면 됩니다 그 안에 main 그리고 쭉쭉쭉

▶main : 보통 가장 상위에 있다고 보시면 됩니다. main 안으로 section, article 들이 있습니다.

▶article : main, section 안에서 사용되며 여러 내용들을 보여줄 때 사용합니다.

▶section : article을 품고 있기 때문에 카테고리 목록 정리할 때 사용합니다.

▶footer : 맨 아래에 사용되며 웹 페이지의 부가적인 정보를 적는 곳 입니다.

▶aside : 보통 광고나 아니면 옆에 카테고리로 사용합니다.