의미론적 HTML 구조를 이해하는 방법_HTML/Xhtml_웹페이지 제작

모두가 html과 css를 알고, html 구조와 css 성능의 분리를 알고, html 의미를 알고 있다고 생각합니다. 이것들은 최근 몇 년간 인기 있는 키워드입니다. 시맨틱 HTML은 1~2년 전부터 중국에서 인기를 끌기 시작했습니다. 지금 그룹에서 논의되는 HTML 구조와 HTML 구조에 대한 인터뷰 질문을 보면 시맨틱 HTML이 많은 부분을 차지합니다. 그렇다면 의미론적 HTML을 사용하는 이유는 무엇입니까? 시맨틱 HTML의 이점은 무엇입니까?

HTML은 웹 문서 콘텐츠의 맥락적 구조와 의미를 제공합니다. 예를 들어

은 굵게 표시되며, 은 굵게 표시됩니다. , 이것이 HTML의 성능이라고 생각하지 마십시오. 이것은 실제로 HTML의 기본 CSS 스타일입니다. 따라서 우선 HTML은 페이지 성능과 관련이 없다는 것을 알아야 합니다. 페이지에서 HTML의 역할은 구조와 의미입니다. 우리가 여기에 넣는 것은 내용을 나누는 것입니다.

의미론적 HTML 구조는 먼저 HTML 구조를 강조해야 합니다

HTML 구조는 페이지의 뼈대입니다. HTML 구조는 강철과 콘크리트의 벽입니다. 집에 강철과 콘크리트의 벽이 없다면 그것은 단지 쓸모없는 더미일 뿐입니다. 벽돌이고 사람이 살 수 없으며 일할 수 없습니다. CSS는 장식용 재료입니다. 집을 장식하는 데 사용됩니다. CSS의 힘은 말할 것도 없이 HTML 구조입니다. 보드는 함께 칠해져 있으며 실제 사용 가치는 없습니다. CSS는 이를 참조하는 (X)HTML 문서에 전적으로 의존합니다. CSS의 강력한 기능을 최대한 활용하려면 깔끔하고 구조화된 콘텐츠를 HTML에 제공해야 합니다. "HTML은 인터넷에 하이퍼텍스트를 게시하는 데 사용되는 공용어입니다. HTML은 태그를 사용하여 텍스트를 구성합니다. .ization”(http://www.w3.org/MarkUp/).

의미론적 HTML 구조를 작성하는 방법은 무엇입니까?
HTML은 텍스트 콘텐츠에 구조와 의미(또는 "의미론")를 추가하는 방법입니다. "이 줄은 제목이고, 이 줄은 단락을 구성합니다. 이 단어는 항목 목록이고, 이 단어는 인터넷에 있는 다른 파일에 대한 하이퍼링크입니다." HTML을 허용해서는 안 된다는 점은 주목할 가치가 있습니다. "이 텍스트는 파란색이고, 이 텍스트는 빨간색입니다. 콘텐츠의 이 부분은 가장 오른쪽 열이고 이 콘텐츠 줄은 기울임꼴로 표시되어 있습니다." 성능과 관련된 이 정보는 CSS의 작업입니다. 프런트엔드 개발을 할 때 기억하세요: HTML은 콘텐츠의 모양이 아니라 콘텐츠가 무엇인지(또는 그 의미)를 알려줍니다. "의미론적 마크업"에 관해 이야기할 때, 우리가 말하는 HTML은 프레젠테이션 정보와 완전히 분리되어야 하며, 그 안의 태그는 의미론적으로 문서의 구조를 정의해야 합니다.

의미론적 HTML 구조는 실제로 매우 간단합니다. 먼저 HTML에서 각 태그의 의미를 파악하세요. 는 순서가 지정되지 않은 목록입니다. .잠깐... 콘텐츠를 보면 어떤 태그가 콘텐츠를 더 잘 설명할 수 있을지 생각해보고 원하는 태그를 사용하세요.

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

우리는 HTML5에

및

와 같은 새로운 태그가 있다는 것을 알고 있습니다. HTML은 이 점에서 html5만큼 발전하지 않았습니다. 사망한 이유 중 하나는 의미론적 HTML 구조가 HTML의 발전 추세임을 보여줍니다.

1. 스타일이 제거되거나 손실되면 페이지에 명확한 구조가 표시될 수 있습니다.

HTML 자체에는 성능이 없습니다. 예를 들어

은 글꼴 크기가 2em이고 은 굵게 표시됩니다. 이는 실제로 HTML의 기본값입니다. 따라서 CSS 스타일이 제거되거나 손실되면 페이지가 명확한 구조를 나타낼 수 있습니다. 이는 의미론적 HTML 구조의 장점이 아닙니다. 기본 스타일의 목적은 HTML을 더 잘 표현하는 것이기도 합니다. 브라우저의 기본 스타일과 의미론적 HTML 구조는 분리될 수 없습니다.

2. 스크린 리더(방문자가 시각 장애가 있는 경우)는 전적으로 마크업을 기반으로 페이지를 "읽습니다" .

예를 들어 의미 마크업을 사용하는 경우 스크린 리더는 단어를 전체 발음하는 대신 "철자"합니다.

3. PDA, 휴대폰 및 기타 장치는 일반 컴퓨터 브라우저처럼 웹페이지를 렌더링하지 못할 수 있습니다(대개 이러한 장치는 CSS에 대한 지원이 약하기 때문입니다). 의미적 마크업을 사용하면 이러한 장치가 의미 있는 방식으로 웹페이지를 렌더링할 수 있습니다. 이상적으로는 보기 장치가 장치 자체의 조건과 일치하는 웹페이지를 렌더링하는 작업을 담당합니다.

시맨틱 마크업은 장치에 필요한 관련 정보를 제공하므로 가능한 모든 표시 상황(기존 장치 또는 향후 새 장치 포함)을 고려할 필요가 없습니다. 예를 들어 휴대폰에서는 마크업 제목 텍스트를 사용하도록 선택할 수 있습니다. 굵게 표시됩니다. 어느 쪽이든 텍스트를 제목으로 표시하면 읽기 장치가 페이지 표시에 따라 적절하게 읽을 수 있습니다.

4. 검색 엔진 크롤러도 태그를 사용하여 개별 키워드의 맥락과 비중을 결정합니다.

과거에는 검색 엔진 크롤러도 웹사이트의 "방문자"라는 점을 고려하지 않았을 수 있습니다. 그러나 이제는 검색 엔진 크롤러가 없으면 실제로 매우 귀중한 사용자가 되며 검색 엔진은 웹사이트를 색인화할 수 없게 됩니다. 일반유저분들은 방문하시면 정말 안타깝습니다.

5. 크롤러는 성능에 사용되는 마크업을 대부분 무시하고 의미적 마크업에만 집중하기 때문에 페이지가 이해하기 쉬운지 여부가 매우 중요합니다. 따라서 페이지 파일의 제목을 태그하는 대신 태그하면 해당 페이지가 검색 결과에서 더 낮은 위치에 배치될 수 있습니다. 자체적으로 페이지의 스타일과 동작을 적용하기 위한 많은 "후크"를 제공합니다.

SEO는 주로 웹사이트 콘텐츠와 외부 링크에 따라 달라집니다.

6. 팀 개발 및 유지 관리 촉진

W3C는 우리에게 좋은 표준을 제시했습니다. 팀의 모든 구성원이 이 표준을 따르면서 많은 차별화를 줄이고, 개발 및 유지 관리를 용이하게 하며, 개발 효율성을 높이고,

모듈형 개발을 달성

할 수도 있습니다. 다른 의견이나 추가 사항이 있으면 토론을 위해 메시지를 남겨주세요.

토론에 참여해주신 Gui 형제, Milk Tea, Xiaozhi, Stealing Rice, Caspar 및 CSS Forest Group에 감사드립니다