Skip to main content

시맨틱 HTML이란 무엇이며 왜 그것을 사용해야 하는가?

HTML이 쉽다구? (div 좀 그만써요ㅠㅠ 살려주세요) (유월 2025)

HTML이 쉽다구? (div 좀 그만써요ㅠㅠ 살려주세요) (유월 2025)
Anonim

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

시맨틱 HTML 란 무엇인가?

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

태그는 동봉 된 텍스트가 단락임을 나타냅니다.

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

이 방정식의이면에는 다음과 같은 태그가 있습니다. 텍스트가 어떻게 보일 것인지 (굵게 또는 기울임 꼴) 만 정의하고 마크 업에 추가적인 의미를 부여하지 않기 때문에 의미 론적이지 않습니다.

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

…을 통하여
,
, 과 . 표준 준수 웹 사이트를 구축 할 때 사용할 수있는 더 많은 의미 론적 HTML 태그가 있습니다.

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

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

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

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

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

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

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

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

  • blockquote - 어떤 사람들은
    따옴표가 아닌 들여 쓰기 텍스트 용 태그. 이것은 블록 쿠트가 기본적으로 들여 쓰기되기 때문입니다. 단순히 들여 쓰기의 장점을 원하지만 텍스트가 블록 쿼트가 아닌 경우 CSS 여백을 대신 사용하십시오.
  • p - 일부 웹 편집자는 (paragraoph에 포함 된 획기적인 공간)을 사용하여 해당 페이지의 텍스트에 대한 실제 단락을 정의하는 대신 페이지 요소 사이에 여유 공간을 추가하십시오. 앞서 언급 한 들여 쓰기 예제에서와 같이 여백 또는 패딩 스타일 속성을 사용하여 공백을 추가해야합니다.
  • ul - blockquote와 마찬가지로,
      태그는 대부분의 브라우저에서 텍스트를 들여 쓰기합니다. 이것은 의미 상 부정확하며 잘못된 HTML입니다.
    • 태그는
        꼬리표. 다시 말하지만, 여백 또는 패딩 스타일을 사용하여 텍스트를 들여 씁니다.
    • h1-h6 - 제목 태그는 글꼴을 더 크고 굵게 만들 때 사용할 수 있지만 텍스트가 표제가 아닌 경우 표제 태그 안에 있으면 안됩니다. 페이지의 특정 텍스트의 크기 나 무게를 변경하려면 font-weight 및 font-size CSS 속성을 대신 사용하십시오.
    • 의미가있는 HTML 태그를 사용하면 모든 것을 둘러싼 것보다 더 많은 정보를 전달하는 페이지를 만들 수 있습니다.

      태그.

      의미있는 HTML 태그는 무엇입니까?

      거의 모든 HTML4 태그와 모든 HTML5 태그가 의미 론적 의미를 가지지 만 일부 태그는 사실 의미 상 의미가 있습니다.

      예를 들어, HTML5는 태그를 의미 적으로 사용합니다. 그만큼 태그는 특별히 중요성을 나타내지 만 대개 굵게 표시되는 텍스트입니다. 그만큼 태그는 특별히 중요성이나 강조점을 전달하지 않지만 일반적으로 이탤릭체로 표시되는 텍스트를 정의합니다.

      시맨틱 HTML 태그

      약어
      두문자어
      긴 인용문
      정의
      문서 작성자의 주소
      소환
      코드 참조
      텔레 텍스트 텍스트
      논리적 구분
      일반 인라인 스타일 컨테이너
      삭제 된 텍스트
      삽입 된 텍스트
      강한 강조
      첫 번째 레벨 헤드 라인
      2 차 레벨 헤드 라인
      3 레벨 제목
      4 수준 헤드 라인
      다섯 번째 레벨 제목
      여섯 번째 수준 표제
      주제별 휴식
      사용자가 입력 할 텍스트
      미리 포맷 된 텍스트
      짧은 인라인 인용문
      샘플 출력
      첨자
      위에 쓴
      변수 또는 사용자 정의 텍스트