나는 모두가 html과 css를 알고, html 구조와 css 성능의 분리를 알고, html 의미를 알고 있다고 믿습니다. 이것들은 최근 몇 년간 인기 있는 키워드입니다. 시맨틱 HTML은 1~2년 전부터 중국에서 인기를 끌기 시작했습니다. 지금 그룹에서 논의되는 HTML 구조와 HTML 구조에 대한 인터뷰 질문을 보면 시맨틱 HTML이 많은 부분을 차지합니다. 그렇다면 의미론적 HTML을 사용하는 이유는 무엇입니까? 시맨틱 HTML의 이점은 무엇입니까?
HTML은 웹 문서 콘텐츠의 맥락적 구조와 의미를 제공합니다. 예를 들어 <h1>은 굵게 표시되고 글꼴 크기는 2em이므로 굵게 표시하지 마세요. 이것이 HTML이라고 생각하면 실제로는 HTML의 기본 CSS 스타일이므로 우선 HTML은 페이지 성능과 아무 관련이 없으며 이는 CSS 문제라는 점을 알아야 합니다. 페이지에서 HTML의 역할은 구조와 의미입니다. 우리가 여기에 넣는 것은 내용을 나누는 것입니다.
의미론적 HTML 구조는 먼저 HTML 구조를 강조해야 합니다.
HTML 구조는 페이지의 뼈대입니다. HTML 구조는 강철과 콘크리트로 이루어진 벽입니다. 집에 강철과 콘크리트가 없으면 쓸모없는 벽돌 더미일 뿐입니다. 거주하거나 업무용으로 사용할 수 없습니다. CSS는 장식용 재료입니다. 집을 장식하는 데 사용됩니다. CSS의 힘은 말할 것도 없이 HTML 구조입니다. 보드는 함께 칠해져 있으며 실제 사용 가치는 없습니다. CSS는 이를 참조하는 (X)HTML 문서에 전적으로 의존합니다. CSS의 강력한 기능을 최대한 활용하려면 깔끔하고 구조화된 콘텐츠를 HTML에 제공해야 합니다. "HTML은 인터넷에 하이퍼텍스트를 게시하는 데 사용되는 공용어입니다. HTML은 태그를 사용하여 텍스트를 구성합니다. 화”( http://www.w3.org/MarkUp/ ).
의미론적 HTML 구조를 작성하는 방법은 무엇입니까?
HTML은 텍스트 콘텐츠에 구조와 의미(또는 "의미론")를 추가하는 방법입니다. "이 줄은 제목이고, 이 줄은 단락을 구성합니다. 이 단어는 항목 목록이고, 이 단어는 인터넷에 있는 다른 파일에 대한 하이퍼링크입니다." HTML을 허용해서는 안 된다는 점은 주목할 가치가 있습니다. "이 텍스트는 파란색이고, 이 텍스트는 빨간색입니다. 콘텐츠의 이 부분은 가장 오른쪽 열이고 이 콘텐츠 줄은 기울임꼴로 표시되어 있습니다." 성능과 관련된 이 정보는 CSS의 작업입니다. 프런트엔드 개발을 할 때 기억하세요: HTML은 콘텐츠의 모양이 아니라 콘텐츠가 무엇인지(또는 그 의미)를 알려줍니다. "의미론적 마크업"에 관해 이야기할 때, 우리가 말하는 HTML은 프레젠테이션 정보와 완전히 분리되어야 하며, 그 안의 태그는 의미론적으로 문서의 구조를 정의해야 합니다.
의미론적 HTML 구조는 실제로 매우 간단합니다. 먼저 html에서 각 태그의 의미를 파악하세요. <div>는 컨테이너이고 <ul><li>는 순서가 지정되지 않은 목록입니다. 콘텐츠 보기 어떤 라벨이 콘텐츠를 더 잘 설명할 수 있는지 생각할 때 어떤 라벨이든 사용하세요.
의미론적 HTML 구조의 이점은 무엇입니까?
우리는 HTML5에 <header> 및 <footer>와 같은 새로운 태그가 있다는 것을 알고 있습니다. HTML은 더 강력하고 의미론적인 HTML 구조를 향해 발전하고 있습니다. 이 점에서 xhtml2는 html5만큼 발전하지 않았습니다. xhtml2의 죽음 또한 의미론적 HTML 구조가 html의 발전 추세임을 보여줍니다.
1. 스타일이 제거되거나 손실되면 페이지에 명확한 구조가 표시될 수 있습니다.
예를 들어, <h1>은 굵게, <strong>은 굵게 표시됩니다. 이것이 실제로 HTML의 기본 CSS 스타일이라고 생각하지 마세요. . 기능을 사용하면 페이지가 명확한 구조로 표시될 수 있지만 브라우저에는 기본 스타일이 있습니다. html.브라우저 기본 스타일과 의미론적 HTML 구조는 분리될 수 없다고 말할 수 있습니다.
2. 스크린 리더(방문자가 시각 장애가 있는 경우)는 마크업 전체를 기반으로 페이지를 "읽습니다" .
예를 들어, 의미 체계 마크업을 사용하는 경우 화면 판독기는 단어 전체를 발음하는 대신 단어를 "철자"합니다.
3. PDA 및 휴대폰과 같은 장치는 일반 컴퓨터 브라우저처럼 웹 페이지를 렌더링하지 못할 수 있습니다(대개 이러한 장치는 CSS에 대한 지원이 약하기 때문입니다).
의미론적 마크업을 사용하면 이러한 장치가 의미 있는 방식으로 웹 페이지를 렌더링할 수 있습니다. 이상적으로는 보기 장치가 장치 자체의 조건과 일치하는 웹 페이지를 렌더링하는 작업을 맡게 됩니다.
의미론적 태깅은 장치에 필요한 관련 정보를 제공하므로 가능한 모든 표시 시나리오(향후 기존 장치 또는 새 장치에서)를 고려해야 하는 수고를 덜 수 있습니다. 예를 들어 전화기는 제목이 태그된 섹션을 표시하도록 선택할 수 있습니다. 텍스트는 굵은 글꼴로 표시됩니다. 어느 쪽이든 텍스트를 제목으로 표시하면 읽기 장치가 해당 페이지를 적절하게 표시할 수 있습니다.
4. 검색 엔진 크롤러는 또한 태그를 사용하여 개별 키워드의 맥락과 가중치를 결정합니다.
과거에는 검색 엔진 크롤러도 웹 사이트의 "방문자"라는 점을 고려하지 않았을 수 있지만 이제는 실제로 매우 귀중한 사용자입니다. 크롤러가 없으면 검색 엔진이 웹 사이트를 색인화할 수 없으며 결국에는 그렇게 될 것입니다. 일반 사용자가 와서 방문하기가 어렵습니다.
5. 크롤러는 성능을 위해 사용되는 마크업을 대부분 무시하고 의미적 마크업에만 집중하기 때문에 페이지가 크롤러가 이해하기 쉬운지 여부가 매우 중요합니다.
따라서 페이지 파일의 제목을 태그가 아닌 태그로 지정하면 페이지가 검색 결과에서 하위에 표시될 수 있습니다. 시맨틱 마크업은 사용 편의성을 향상시킬 뿐만 아니라 자체적으로 많은 " Hook"을 사용하여 페이지의 스타일과 동작을 적용합니다.
SEO는 주로 웹사이트 콘텐츠와 외부 링크에 의존합니다.
6. 팀 개발 및 유지 관리 촉진
W3C는 우리에게 좋은 표준을 설정했습니다. 팀의 모든 구성원이 이 표준을 따르므로 많은 차별화 요소를 줄이고, 개발 및 유지 관리를 촉진하며, 개발 효율성을 향상하고, 심지어 모듈식 개발도 달성할 수 있습니다 .
다른 의견이나 추가 사항이 있으면 토론을 위해 메시지를 남겨주세요.
토론에 참여한 Gui 형제, Milk Tea, Xiaozhi, Stealing Rice, Caspar 및 CSS Forest Group에 감사드립니다.