> 웹 프론트엔드 > HTML 튜토리얼 > HTML 의미론이란 무엇입니까? HTML 의미론의 이점(요약)

HTML 의미론이란 무엇입니까? HTML 의미론의 이점(요약)

青灯夜游
풀어 주다: 2018-09-19 16:02:59
원래의
7843명이 탐색했습니다.

이 장에서는 HTML 의미론이 무엇인지 소개합니다. html 의미론(요약)의 이점은 일정한 참고 가치가 있으므로 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

HTML 의미론이란 무엇인가요?

기본적으로 제목(H1~H6), 목록(li), 강조(strong em) 등 몇 가지 주요 태그를 중심으로 구성됩니다.

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

의미론적 HTML 구조의 이점은 무엇인가요?

HTML5에는

와 같은 새로운 태그가 있다는 것을 알고 있습니다. HTML은 이 점에서 더 강력하고 의미 있는 HTML 구조를 향해 발전하고 있습니다. xhtml2의 죽음. 그 이유 중 하나는 의미론적 HTML 구조가 HTML의 발전 추세임을 보여줍니다.

  1. CSS 없이 페이지에 좋은 콘텐츠 구조와 코드 구조를 표시하려면: 알몸으로 실행할 때 보기 좋게 표시하기 위해

  2. 사용자 경험: 예를 들어 제목과 대체는 명사를 설명하거나 설명하는 데 사용됩니다. 사진 정보, 라벨 태그의 유연한 사용은 SEO에 유익합니다. 검색 엔진과의 원활한 커뮤니케이션을 구축하면 크롤러가 더 효과적인 정보를 포착하는 데 도움이 됩니다. 크롤러는 라벨을 사용하여 각 키워드의 컨텍스트와 가중치를 결정합니다. 다른 장치(예: 스크린 리더, 시각 장애인 리더, 모바일 장치)에서 웹 페이지를 의미 있는 방식으로 렌더링하는 데 편리합니다.

  3. 팀 개발 및 유지 관리에 편리하고 의미 체계가 더 읽기 쉬우며 웹의 다음 단계입니다. 페이지 중요한 추세, W3C 표준을 따르는 팀은 모두 이 표준을 따르므로 차별화가 줄어들 수 있습니다.

  4. HTML 코드 작성 시 주의할 점은 무엇인가요?

의미가 없는 태그 div와 범위를 가능한 한 적게 사용하세요. 의미가 명확하지 않으면 div나 p를 사용해 보세요. p에는 기본적으로 위쪽과 아래쪽 간격이 있기 때문입니다. 이는 특수 터미널과의 호환성에 도움이 됩니다.

  1. b, 글꼴, u 등과 같은 순수 스타일 태그를 사용하지 말고 대신 CSS 설정을 사용하세요.

  2. 강조해야 하는 텍스트는 Strong 또는 em 태그에 포함될 수 있습니다(브라우저 기본 스타일, CSS로 지정할 수 있으면 필요하지 않음). Strong의 기본 스타일은 굵게 표시됩니다. b)를 사용하지 마세요(사용하지 마세요). i)

  3. 표를 사용할 때 제목에는 캡션을, 헤더에는 thead를, 주요 부분에는 tfoot을 사용하세요. 꼬리. 테이블 헤더는 일반 셀과 구별되어야 합니다.

  4. 양식 필드는 fieldset 태그로 래핑되어야 하며, 범례 태그는 양식의 목적을 설명하는 데 사용되어야 합니다. 각 입력 태그는 이에 해당합니다. 설명 텍스트는 label 태그를 사용해야 하며, 입력에 대한 id 속성을 설정하고 label 태그에 for=someld를 설정하면 설명 텍스트가 해당 입력에 연결됩니다.

  5. HTML5는 새로운 의미 태그를 추가합니다
  6. HTML 5의 혁신 중 하나: 의미 태그 섹션 요소 태그.
  7. HTML 5가 나오기 전에는 페이지 장을 나타내기 위해 div를 사용했지만 이러한 div는 실질적인 의미가 없었습니다. (이 콘텐츠의 의미를 설명하기 위해 CSS 스타일 ID와 클래스를 사용하는 경우에도 마찬가지입니다.) 이러한 태그는 웹페이지의 특정 부분을 정의하기 위해 브라우저에 제공하는 지침일 뿐입니다. 하지만 이제 html5의 등장으로 이전에는 "의미"가 없었던 태그가 사라졌습니다. 이것이 바로 우리가 "의미"라고 부르는 것입니다.

  8. 레이아웃에 div 태그를 사용하지 않은 아래 그림을 보세요

W3C에서는 이러한 의미 태그를 정의하고 있는데 이는 제정된 법률이 100년 동안 변경 없이 유포될 수 없는 것처럼 때로는 우리의 디자인 목표를 완전히 충족할 수 없는 경우도 있습니다. 이는 얼마 전에 공식화되었으며 이러한 의미 태그가 모든 디자인 목표에 적응하는 것은 불가능합니다. 이는 어느 정도 "보편적"일 뿐입니다. 우리의 목표는 크롤러가 중요한 사항을 이해할 수 있도록 하는 것입니다.

결론: HTML 5 태그 때문에 div를 버릴 수는 없습니다.

노드 요소 태그는 사용 위치에 따라 섹션 요소 태그, 텍스트 요소 태그, 그룹 요소 태그로 나눌 수 있습니다. HTML5에 새로 추가된 시맨틱 태그와 사용법에 대해 별도로 설명하겠습니다.

아아아아

위 내용은 HTML 의미론이란 무엇입니까? HTML 의미론의 이점(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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