HTML 의미론 및 몇 가지 간단한 최적화

1. 의미론이란 무엇인가요?

Bing 온라인 코드 설명

의미화란 합리적인 HTML 태그와 고유한 속성을 사용하여 문서 콘텐츠의 형식을 지정하는 것을 의미합니다. 일반인의 용어로 의미론은 기계가 이해할 수 있도록 데이터와 정보를 처리하는 것입니다. Semantic (X)HTML 문서는 PDA, 텍스트 브라우저 및 장애인을 사용하는 방문자를 위한 웹 사이트의 유용성을 향상시키는 데 도움이 됩니다. 그것으로부터 이익을 얻으십시오. 검색 엔진이나 크롤러 소프트웨어의 경우 색인을 구축하는 데 도움이 되며 더 높은 가중치를 부여할 수 있습니다. 실제로 SEO에 가장 효과적인 방법 중 하나는 본질적으로 의미론적으로 웹 페이지의 HTML 구조를 재구성하는 것입니다.

간단히 말해서 콘텐츠의 구조(콘텐츠 의미론)를 기반으로 적절한 태그(코드 의미론)를 선택하여 개발자가 보다 우아한 코드를 읽고 쓸 수 있도록 하는 동시에 브라우저 크롤러와 시스템을 더 좋게 만듭니다. 로컬 분석, 어떤 콘텐츠에는 어떤 태그를 사용해야 하는지.

2. 의미론의 장점은 무엇인가요?

• CSS 파일이 성공적으로 로드되지 않은 경우에도 페이지에 좋은 콘텐츠 구조가 표시될 수 있습니다.
• 검색 엔진과 크롤러 소프트웨어가 더 유용한 정보를 캡처하고, 색인을 구축하고, 더 높은 가중치를 얻을 수 있도록 하여 SEO에 유리합니다.
• 다른 장치(예: 스크린 리더, 시각 장애인 리더, 모바일 장치)에서 웹 페이지를 의미 있는 방식으로 렌더링할 수 있는 편리함

3. HTML5의 의미

최신 HTML5는 웹페이지 구조에 구조화된 태그 시스템을 추가합니다.

구조:

<span style="color: #0000ff;"><</span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>头部<span style="color: #0000ff;"></</span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>导航<span style="color: #0000ff;"></</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>内容1<span style="color: #0000ff;"></</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>内容2<span style="color: #0000ff;"></</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>内容3<span style="color: #0000ff;"></</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span>侧边栏<span style="color: #0000ff;"></</span><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>底部<span style="color: #0000ff;"></</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>

　

4. HTML 작성 시 주의사항

• 태그 폐쇄>,/>;;
• 블록 요소를 둘러싸는 인라인 요소를 방지하려면 태그 중첩을 올바르게 사용하세요.
• 태그를 합리적으로 사용하고 CSS 파일이 성공적으로 로드되지 않은 경우에도 페이지는 좋은 콘텐츠 구조를 제공할 수 있습니다.

• ,

  ,

  ,

  ,

  ,

  을 제목으로 사용하고 중요도가 높은 순서대로

  이 가장 높습니다. 수준

• 를 사용하여 단락을 구분하고
  

순수한 스타일 태그, b, 글꼴, u 등을 사용하지 말고 대신 CSS 설정을 사용하세요.
표를 사용할 때는 , , 를 사용하여 머리글, 본문 내용, 표를 둘러쌉니다.

5. SEO 최적화에 있어서 HTML은 어떻게 해야 하나요?

문서 유형은 HTML5 doctype ;
• 을 사용합니다.
메타 태그 최적화에는 주로 제목, 설명 및 키워드가 포함됩니다. 끝에 ">"를 사용하지 마세요.
하나의 CSS 파일을 사용하여 헤더 태그에 배치하는 것이 가장 좋습니다.
• js 파일 로딩으로 인해 HTML 렌더링이 차단되는 것을 방지하려면 js 파일을 맨 아래에 배치하는 것이 가장 좋습니다.
• CSS 및 JS 코드를 HTML에 직접 작성하지 않으려면 외부 파일을 사용하세요.
• 파일을 가져올 때 절대 주소를 사용하세요. 절대 주소에는 웹사이트의 도메인 이름이 포함됩니다.
• IMG 태그에 alt 키워드를 추가하면 SEO 최적화에 도움이 됩니다. 검색에 포함되지 않는 "of", "up", "good", "etc." 등은 사용하지 마세요. 기본적으로 엔진 데이터베이스
• 로고에 h1 태그를 추가합니다. 이 제목은 웹페이지에서 가장 중요한 정보이므로

html 웹페이지가 표준에 부합하는지 여부는 본 웹페이지에서 확인하실 수 있으며, 링크에 직접 접속하시면 확인 결과를 보실 수 있습니다

https://validator.w3.org/nu/