시맨틱 스의 기본
의미론은 많은 디자이너의 마음에 공포를 불러 일으키는 단어이지만 어렵거나 복잡한 주제 일 필요는 없습니다. 표현 표현을 피하고 가능하면 적절하고 의미있는 태그를 사용하는 의미있는 표현과 관련이 있습니다.
본질적으로 의미 론적 방식으로 HTML 코드를 디자인하고 작성하는 것은 HTML이 레이아웃이 아닌 페이지의 내용에 관심을 갖도록하는 것만 큼 간단합니다. 아래의 간단한 단계 중 일부는 검색 엔진, 스파이더 및 방문자를 의미 적으로 기쁘게 유지하는 데 도움이됩니다.
Envato Elements 살펴보기
제목 태그
페이지 제목 태그가 설명적이고 의미가 있는지 확인하십시오. 해당 페이지의 내용을 반영하도록 사이트의 각 페이지마다 변경되는지 확인하십시오.
제목
div 및 span 태그를 사용하여 페이지 제목을 정의 할 수 있지만 제목이라는 의미는 없습니다. h1 ~ h6 태그를 사용하여 페이지의 제목을 구분하고 스타일을 지정하는 것이 훨씬 좋습니다.
테이블과 양식
기본적으로 테이블과 양식은 의미가 없으며 일반적 일 수 있습니다. 또한 비표준 브라우저를 사용하는 사람들에게는 접근성이 부족합니다. 테이블의 경우 thead 태그를 사용하여 테이블의 열을 설명하십시오. 양식의 경우 레이블 태그를 사용하여 각 입력, 확인란 등이 무엇인지 설명하십시오.
이미지
그것은 계속해서 반복되는 것처럼 보이지만 모든 이미지에 속성을 사용하여 검색 엔진과 장애가있는 사용자의 이익을 위해 페이지 콘텐츠 내에 설명되어 있는지 확인하십시오.
똑바로 보인다… 그러나 왜?
시맨틱 코드를 사용한다고해서 웹 사이트가 다르게 보일 수는 없으며 독자에게 직접적으로 도움이되지는 않습니다. 당신이 볼 수있는 직접적인 효과 중 하나는 검색 엔진이 귀하의 웹 사이트를보다 정확하고 효과적인 방식으로 스파이더 링한다는 것입니다.
또한 시맨틱 코딩은 미래를 향한 길을 닦고 있습니다. 새로운 장치, 소프트웨어 및 응용 프로그램은 앞으로 5, 10, 100 년 안에 웹의 콘텐츠를 사용하여 장치를 구동 할 것입니다. 시맨틱 스는 미래 시스템이 준수하고 해석 할 표준을 설정하므로 미래를 스스로 증명하십시오!
