시맨틱 HTML: 2019년 모범 사례
게시 됨: 2019-08-31시맨틱 HTML은 특히 Google이 지속적으로 페이지 순위 알고리즘을 변경하기 때문에 그 어느 때보다 중요합니다. 각 검색어의 상위권은 점점 더 경쟁이 치열해지고 있습니다. 비밀 무기가 필요하며 의미 체계 HTML은 무기고에 있으면 좋습니다. 당신은 당신의 웹 사이트에 몇 가지 의미 코드를 사용할 수 있지만, 더 당신이 중요한 콘텐츠를 삽입 할 수 있습니다, 더 나은 검색 엔진 사이트를 크롤링하고 미래의 방문자에게 제공 무엇인지 알 수 있습니다.
시맨틱 HTML이란 무엇입니까?
간단히 말해서 시맨틱 HTML은 인간이 읽고 이해할 수 있는 HTML입니다. 코더와 개발자뿐만 아니라 인간이라면 누구나 쉽게 읽을 수 있고 로봇도 읽을 수 있습니다. 로봇이 사이트 구조를 더 쉽게 읽을 수 있다면 사이트가 다양한 검색어에 얼마나 잘 대응하는지에 대한 정보에 입각한 결정을 내릴 수 있습니다.
기본적으로 검색 엔진 크롤러에게 "이것은 블로그 게시물입니다" 또는 "이것은 탐색 메뉴입니다"라고 말하고 있습니다.
하지만 어떻게 그렇게 합니까? 글쎄, 그것은 매우 구체적인 많은 특수 HTML5 태그를 사용합니다. 몇 가지 예를 살펴보고 직접 확인할 수 있습니다.
텍스트 서식
텍스트 서식은 가장 일반적인 의미론적 HTML이며 매일 보게 됩니다. 이전에는 굵게 , 기울임꼴 , 밑줄 등을 나타내는 단일 문자가 서식을 나타내는 데 사용되었습니다.
<p>This is <b>bold text</b></p> <p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>
시맨틱 HTML을 사용하면 강한 텍스트에서 굵은 텍스트를 사용하고 텍스트의 강한 중요성이나 em 을 사용하여 텍스트를 기울임꼴(또는 강조)로 표시합니다. 흥미롭게도 U 는 여전히 텍스트에 밑줄을 긋는 데 사용됩니다. 그러나 MDN은 CSS를 통해 text-decoration: underline; 그것을 구별하기 위해.
<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p> <p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>
우리는 또한 보여줄 델 을 좋아합니다. 취소선 삭제된 텍스트.
<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>
그리고 우리는 의미론적 HTML 텍스트 포맷팅을 하이라이트로 마무리할 것이라고 생각했습니다. 문자 그대로. 텍스트 주위에 표시 를 사용하면 묶는 모든 항목을 강조 표시합니다.
<p>Make sure that you remember <strong>this term for your test</strong>. <p>But you should remember <mark>this information about how to use it in context</mark>.</p> <p>If you do that, you will be fine.</p>
MDN은 이것이 strong 을 사용하는 것과 같은 방식으로 사용되지 않는다고 말합니다. 텍스트에서 중요한 것을 나타내기 위해 strong 을 사용하고 이해와 관련된 것을 강조하기 위해 mark 를 사용합니다.
섹션, 헤더 및 메뉴
시작하는 가장 좋은 방법은 머리글과 바닥글을 사용하는 것입니다. 모든 사람이 웹사이트에서 가장 좋아하는 부분은 구축하고 처리해야 합니다. 기존 HTML을 사용하면 다음과 같이 코딩된 헤더가 있을 수 있습니다.
<div>
<h1>Page Title Goes here</h1>
<p>Tagline!</p>
<div>
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
그 코드를 보면 모든 것이 무엇인지 알 수 있습니다. 그러나 그것은 당신이보고있는 것을 알고있는 경우에만 가능합니다. 제목, 태그라인 및 (매우 기본적인) 메뉴를 분리하는 몇 개의 중첩된 div(컨테이너)가 있습니다. 이 설정에는 아무런 문제 가 없지만 확실히 옳은 것은 없습니다. 한 단계 더 나아가면 CSS id와 클래스 마크업을 사용하여 좀 더 읽기 쉽게 유지할 수 있습니다.
<div class="header" id="hero-section">
<h1 class="page-title">Page Title Goes here</h1>
<p>Tagline!</p>
<div class="header-menu">
<ul>
<li><a href="example.com">Home Page Link</a></li>
<li><a href="example.com">Blog Page Link</a></li>
<li><a href="example.com">Podcast Page Link</a></li>
</ul>
</div>
</div>
의미 HTML로, 일이 많은 청소기를보고 쉽게 읽을 수, 당신은 div의에 의존하지 않아도, 당신이 선택하는 것이 클래스와 ID는 유일하게 스타일링 할 수있다.
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
무슨 일이 일어나고 있는지 읽고 말하기가 훨씬 더 쉽지 않습니까? 당신은이 페이지의 헤더와 탐색 메뉴를 표시하는 탐색 태그는 것을 알 수 있습니다 헤더 태그가 있습니다. (항목을 가로로 나열하기 위해 추가 스타일 지정이 필요하지 않을 정도로 똑똑합니다.)
기술적으로 스타일이 올바르게 적용되었는지 확인하고 웹사이트의 특정 섹션에 연결할 수 있는 방법이 있는지 확인하려면 다음 코드를 사용할 수도 있습니다. 이 경우 섹션 태그는 이전 예에서 div 태그가 작동하는 방식과 유사하게 작동합니다. 물론, 읽을 수 있고 사람의 눈에 이해가 되는 것은 제외합니다.
<section id="hero-section">
<header>
<h1>Page Title Goes Here</h1>
<p>Tagline!</p>
<nav>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
<a href="example.com">Home Page Link</a>
</nav>
</header>
</section>
또한 id=”hero-section” 사용에 유의하십시오. 이는 선택적 단계의 선택적 단계이지만 섹션 을 자체적으로 CSS 선택기로 스타일 지정할 수 있습니다.
테이크아웃
- 외부 div를 사용하고 싶은 곳에서 섹션 을 사용하세요.
- 헤더 를 사용하여 페이지의 어느 부분이 헤더 인지 나타낼 수 있습니다. 기사나 게시물에서 이것을 사용하여 웹사이트 자체와 별개인 해당 게시물의 헤더를 나타낼 수도 있습니다.
- 사이트의 기본 탐색 메뉴를 설정할 때 nav를 사용하십시오. Nav 는 검색 엔진이 링크를 찾는 방법이 아니라 사용자가 사이트를 탐색할 수 있는 주요 방법을 찾는 방법입니다. 모든 링크 모음(예: 이동 경로 등)도 탐색에 포함될 수 있습니다.
보행인
바닥글에 대해 많이 말할 필요는 없지만 언급해야 합니다. 여러 면에서 헤더와 직접 유사합니다. 전통적인 기본 바닥글은 다음과 같습니다.
<div class="site-footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</div>
반면 의미 바닥글은 다음과 같이 보일 수 있습니다.
<footer>
<p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
<a href="example.com/contact">Contact Us!</a>
<img src="/logo.png">
</footer>
물론 기본 설정에는 큰 차이가 없지만 귀하의 사이트를 보는 로봇은 이러한 설명에 감사할 것입니다. 또한 페이지, 게시물 또는 사이트 바닥글에 바닥 글 을 사용할 수 있습니다.
주요, 기사 및 부수
시맨틱 HTML의 또 다른 주요 구성 요소는 기사 태그입니다. 그와 함께, 옆 도. 이 두 가지를 모두 사용하면 사이트의 실제 콘텐츠를 구성할 수 있으므로 검색 엔진이 기본 텍스트가 무엇인지 알 수 있으므로 해결하려는 문제와 집중하는 주제에 집중할 수 있습니다.
일반적으로 블로그 게시물이나 페이지는 간단한 HTML 문서이지만 머리글, 바닥글, 콘텐츠, 사이드바, 삽입물 등을 모두 함께 묶을 수 있습니다.
<body>
<div class="post-header>
<h1>Article title</h1>
</div>
<div class="post-content>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="article-aside">
<p>Text block</p>
</div>
</div>
<div class="post-footer">
<img src="/subscribe.png">
</div>
</body>
이제 이것은 멋진 코드는 아니지만 작동합니다. 그러나 예쁘지 않으며 렌더링할 때 거의 읽을 수 있는 모양으로 만들기 위해서는 상당한 양의 CSS가 필요합니다. main , article 및 side 를 사용하여 페이지를 더 읽기 쉽게 구성할 수 있습니다.
<main>
<article>
<header>
<h1>Article title</h1>
</header>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<aside>
<p>Text block</p>
</aside>
<footer>
<img src="/subscribe.png">
</footer>
</article>
</main>
그러나 페이지의 주요 내용은 한 번만 표시할 수 있습니다. 페이지당 하나의 메인 만 사용할 수 있음을 의미합니다. 단일 메인 아래에 여러 기사 를 중첩하여 목차 또는 독립 실행형 콘텐츠 디렉토리를 나타낼 수 있습니다(이 방법으로 여러 H1 태그를 사용하여 검색 엔진에 해당 게시물이 독립형임을 표시할 수도 있습니다.
테이크아웃
- 페이지당 단일 기본 태그 사용
- 페이지당 여러 기사 태그를 사용하여 별도의 독립형 콘텐츠(페이지당 여러 H1 포함)를 식별할 수 있습니다.
- Aside 는 사이드바로 사용하거나 게시물 또는 페이지에 삽입할 수 있습니다.
기타 덜 사용되는 요소
분명히 위에서 논의한 요소와 태그는 시맨틱 HTML에서 가장 많이 사용되는 부분입니다. 결국 인터넷의 거의 모든 웹 사이트에는 이들의 조합이 포함되어 있지만 지원되는 나머지 의미 체계 태그는 더 구체적이고 제한적입니다. 그러나 그들은 목적을 달성할 때 그다지 유용하지 않으며 상호 작용 및 검색 인덱싱에 엄청난 도움이 됩니다.
세부 정보 및 요약
세부 정보 및 요약 요소는 사용자가 특별히 활성화하지 않는 한(예: Divi 또는 기타 페이지 빌더의 아코디언 모듈) 숨겨질 수 있는 확장 콘텐츠 레이어를 만듭니다.
<details>
<summary>Headline that will be shown and clicked on</summary>
<p>Content that will be hidden</p>
<a href="example.com">Link that will be hidden</a>
</details>
요약 의 모든 하위 항목은 숨겨지고 확장 가능하며, details 요소를 닫아 추가 텍스트를 추가할 수 있습니다.
그림 및 그림 캡션
이것들은 꽤 자명합니다. 그림 은 게시물에서 일종의 시각적 보조 장치입니다. 사진, 그래프, 포함된 YouTube 동영상일 수 있습니다. figcaption 은 위 그림의 사용을 설명하기 위해 추가한 캡션입니다. 그것들은 본질적으로 의미론을 사용하기 위한 기술적인 것이지만, 메인 포스트나 페이지의 도움으로 특별히 색인을 생성하고자 하는 모든 콘텐츠에 사용할 수 있습니다.
<figure>
<img src="/chart.jpg">
<figcaption>Explanation of this chart in short text</figcaption>
</figure>
이러한 태그는 예를 들어 문제에 대한 솔루션이나 설명을 구체적으로 나타낼 때 Google에서 추천 스니펫을 얻을 수 있는 훌륭한 방법입니다. 캡션을 추가하고 스타일을 지정하는 데 사용하는 코드를 줄일 뿐만 아니라 그림과 캡션을 별도의 요소가 아닌 페이지의 단일 요소로 유지하기 때문에 이러한 옵션을 사용하는 것이 좋습니다.
시간
시간 은 거의 사용되지 않는 태그 중 하나이지만 검색 엔진이 관련된 시간이나 날짜를 알기 위해 특별히 필요한 이벤트나 특별한 경우가 있을 때 단순히 텍스트를 굵게 하거나 강조하는 대신 이 태그를 사용하십시오.
<article> <h1>Title</h1> <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p> </article>
time 요소와 함께 datetime 을 사용하면 개발이 시간 에 훨씬 더 잘 연결되어 캘린더 및 기타 다양한 API와 통합할 수 있습니다. 사이트에서 미리 알림을 보낼 수 있으며 사람들은 더 자주 방문할 것입니다.
결론
의미 없는 HTML을 사용하는 것이 잘못된 것은 아니지만 작업하면서 습관을 들이면 검색 엔진 순위가 향상되는 것을 알게 될 것입니다. 그것이 중요하지만 훨씬 더 중요한 것은 사이트를 구성하고 스타일을 지정하는 방법에서 시간을 절약할 수 있을 뿐만 아니라 프로젝트에서 당신을 뒤따르는 사람들에게 많은 골치거리와 기술적 부채를 예방할 수 있다는 것입니다. .
시맨틱 HTML에 대한 어떤 모범 사례를 따르십니까?
기사 특집 이미지 by whiteMocca / shutterstock.com