시맨틱 HTML을 사용하는 이유

우리가 현재 가지고있는 산업을 담당하는 웹 표준 운동의 중요한 원칙은 HTML 요소를 브라우저에 기본적으로 표시되는 방식보다는 HTML 요소를 사용하는 것입니다. 이것은 시맨틱 HTML을 사용하는 것으로 알려져 있습니다.

시맨틱 HTML 란 무엇인가?

의미 론적 HTML 또는 의미 론적 마크 업은 단순히 표현이 아니라 웹 페이지에 의미를 도입하는 HTML입니다. 예를 들어,

태그는 둘러싸인 텍스트가 단락임을 나타냅니다.

사람들은 단락이 무엇인지 알며 브라우저는이를 표시하는 방법을 알고 있기 때문에 이것은 의미 론적이며 프레젠테이션 적입니다.

이 방정식의이면에서 와 와 같은 태그는 텍스트가 어떻게 표시되어야하는지 (굵게 또는 기울임 꼴) 만 정의하고 마크 업에 추가적인 의미를 부여하지 않기 때문에 의미가 없습니다.

의미 론적 HTML 태그의 예는 헤더 태그

부터

,
, 및 을 포함합니다. 표준 준수 웹 사이트를 구축 할 때 사용할 수있는 더 많은 의미 론적 HTML 태그가 있습니다.

의미에 대해주의해야하는 이유

의미 론적 HTML을 작성하는 이점은 웹 페이지의 목표가 무엇인지, 즉 의사 소통하고자하는 욕구에서 유래합니다. 의미 론적 태그를 문서에 추가하면 통신에 도움이되는 해당 문서에 대한 추가 정보를 제공합니다. 특히, 의미 론적 태그는 브라우저가 페이지와 내용의 의미를 명확하게 해줍니다.

이러한 명확성은 검색 엔진과도 통신하여 적합한 페이지가 올바른 쿼리에 제공되도록합니다.

시맨틱 HTML 태그는 페이지에서의 모양을 넘어서는 태그 내용에 대한 정보를 제공합니다. 태그로 묶인 텍스트는 브라우저에서 특정 유형의 코딩 언어로 즉시 인식됩니다.

이 코드를 렌더링하는 대신 브라우저는 기사 또는 온라인 자습서의 목적을 위해 해당 텍스트를 예제 코드로 사용한다는 것을 이해합니다.

의미 론적 태그를 사용하면 콘텐츠 스타일을 결정하는 데 더 많은 고리가 생깁니다. 아마도 오늘 코드 샘플을 기본 브라우저 스타일로 표시하는 것을 선호하지만, 내일에는 회색 배경색으로 호출하고 싶고 나중에 정확한 단거리 글꼴 모음 또는 글꼴 스택 을 정의하여 사용하려고 할 것입니다. 당신의 샘플. 의미 론적 마크 업과 똑똑하게 적용된 CSS를 사용하여 이러한 모든 작업을 쉽게 수행 할 수 있습니다.

시맨틱 태그를 올바르게 사용하십시오.

시맨틱 태그를 사용하여 프리젠 테이션 목적이 아닌 의미를 전달하려는 경우, 공통된 디스플레이 속성에 대해 단순히 잘못 사용하지 않도록주의해야합니다. 가장 일반적으로 사용되는 의미 론적 태그 중 일부는 다음과 같습니다.

  • blockquote - 어떤 사람들은 따옴표가 아닌 들여 쓰기 텍스트에
    태그를 사용합니다. 이것은 블록 쿠트가 기본적으로 들여 쓰기되기 때문입니다. 단순히 들여 쓰기의 장점을 원하지만 텍스트가 블록 쿼트가 아닌 경우 CSS 여백을 대신 사용하십시오.
  • p - 일부 웹 편집자는 페이지의 텍스트에 대한 실제 단락을 정의하는 대신 페이지 요소 사이에 여백을 추가하기 위해

    & nbsp; (paragraoph에 포함 된 줄 바꿈하지 않는 공간)를 사용합니다. 앞서 언급 한 들여 쓰기 예제에서와 같이 여백 또는 패딩 스타일 속성을 사용하여 공백을 추가해야합니다.