> 웹 프론트엔드 > 프런트엔드 Q&A > 시맨틱 HTML이란?

시맨틱 HTML이란?

青灯夜游
풀어 주다: 2023-01-05 16:13:25
원래의
8143명이 탐색했습니다.

의미론적 HTML은 콘텐츠의 구조화(콘텐츠 의미론)에 따라 적절한 태그(코드 의미론)를 선택하면 개발자가 브라우저 크롤러와 컴퓨터가 잘 구문 분석할 수 있도록 하면서 보다 우아한 코드를 더 쉽게 읽고 작성할 수 있다는 것을 의미합니다. 의미화는 SEO에 유익하며 검색 엔진 크롤러가 웹 페이지를 더 잘 이해하고, 더 효과적인 정보를 얻고, 가중치를 높이는 데 도움이 됩니다.

시맨틱 HTML이란?

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

1. HTML 의미론이란 무엇입니까?

<기본적으로 제목(H1~H6), 목록(li), 강조(strong em) 등 여러 주요 태그를 중심으로 회전합니다.>

 콘텐츠의 구조에 따라(콘텐츠 의미) , 적절한 태그(코드 의미)를 선택하면 개발자가 보다 우아한 코드를 더 쉽게 읽고 작성할 수 있으며 브라우저 크롤러와 컴퓨터가 코드를 잘 구문 분석할 수 있습니다.

2. 왜 의미론인가?

  • CSS 없이 페이지에 좋은 콘텐츠 구조와 코드 구조를 표시하기 위해: 알몸으로 실행할 때 보기 좋게 보기 위해
  • 사용자 경험: 예를 들어 제목과 대체는 명사 또는 이미지 정보를 설명하는 데 사용됩니다. 라벨 태그의 유연한 사용은 SEO에 도움이 됩니다. 검색 엔진과의 원활한 커뮤니케이션을 구축하면 크롤러가 더 효과적인 정보를 포착하는 데 도움이 됩니다. 크롤러는 태그를 사용하여 각 키워드의 컨텍스트와 가중치를 결정합니다. 스크린 리더, 시각 장애인 리더, 모바일 장치)가 의미 있는 방식으로 웹 페이지를 렌더링합니다.
  • 팀 개발 및 유지 관리가 더 쉽고 의미가 더 읽기 쉽습니다. 이는 웹 페이지의 다음 단계에서 중요한 추세입니다. W3C 표준을 따르십시오. 이 표준을 따르는 것은 모두 차별화를 줄일 수 있습니다.
  • 3. HTML 코드 작성 시 주의할 점은 무엇인가요?

의미 없는 태그 p와span을 가능한 한 적게 사용하세요.

의미가 명확하지 않은 경우 p나 p를 사용해 보세요. p는 기본적으로 위쪽과 아래쪽 간격이 있기 때문입니다. 호환성을 위해 터미널이 유익합니다.
  • b, 글꼴, u 등과 같은 순수 스타일 태그를 사용하지 말고 대신 CSS 설정을 사용하세요.
  • 강조해야 하는 텍스트는 Strong 또는 em 태그에 포함될 수 있습니다. (브라우저 기본 스타일, CSS로 지정할 수 있으면 필요하지 않습니다.) Strong의 기본 스타일은 굵게 표시됩니다(b를 사용하지 마세요). ), em은 이탤릭체입니다(i는 사용하지 마세요) ;
  • 표를 사용할 때 제목에는 캡션, 머리글에는 thead, 주요 부분에는 tbody, 꼬리에는 tfoot을 사용하세요. 테이블 헤더는 일반 셀과 구별되어야 합니다. 테이블 헤더에는 th를, 셀에는 td를 사용하세요.
  • 양식 필드는 fieldset 태그로 감싸야 하며, 범례 태그는 양식의 목적을 설명하는 데 사용해야 합니다.
  • 각 입력 태그에 해당하는 설명 텍스트는 다음과 같아야 합니다. 레이블 태그를 사용해야 하며, 입력에 대한 id 속성을 설정하고 레이블 태그에 for=someld를 설정하여 설명 텍스트를 해당 입력과 연결해야 합니다.
  • 추천 튜토리얼: "
  • html 비디오 튜토리얼
  • "

위 내용은 시맨틱 HTML이란?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿