Sematic HTML

Semantic HTML은 태그 사이에 있는 내용에 대한 콘텐츠를 제공하는 특정 요소를 통해 페이지에 의미를 부여합니다.

시멘틱 HTML은 현대적인 표준으로 화면 리더를 이용하여 웹페이지를 번역하는 사람들이 웹 사이트에 접속할 수 있도록 하며 웹 사이트의 SEO를 개선합니다.

header,nav,main,footer는 웹페이지의 기본 구조를 생성합니다.

section은 머리글 또는 동일한 주제를 가진 문서의 다른 영역과 같은 문서의
요소를 정의합니다.

article은 기사, 블로그, 댓글 등과 같은 콘텐츠 자체에 적합한 내용을 담고 있습니다.

aside는 주요 내용과 관련된 정보가 포함되어 있지만 주요 정보를 이해하는 데 필요한 정보는 아닙니다.

figure은 모든 유형의 미디어를 캡슐화합니다.

figcaption은 figure은에서 미디어를 설명하는 데 사용됩니다.

미디어 파일에는 video,audio,embed 요소가 사용됩니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header>
      <h1>Navigational Links</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#posts">Posts</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <article>
          <h2>Facts About Dogs</h2>
          <p>
          Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times.
          </p>
        </article>
        <aside>
          <p>A study was conducted on dogs being away from their owners for varying hours and the studies show that dogs who were away from their owners the longest showed the greatest amount of affection!
          </p> 
        </aside>
      </section> 
      <figure>
        <img src="https://content.codecademy.com/courses/SemanticHTML/dogimage.jpeg"/>
        <figcaption>A cute dog.</figcaption>
      </figure>  
      <audio controls>
        <source src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3" type="audio/mp3">
      </audio> 
      <video src="https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4" controls>
      </video>
      <embed src="https://content.codecademy.com/courses/SemanticHTML/dog-on-beach.gif"/>
    </main>
    <footer>
      <p>Contact me at +1 234 567 8910 </p>
    </footer>
  </body>
</html>

Author And Source

이 문제에 관하여(Sematic HTML), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minj9_6/Sematic-HTML

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Sematic HTML

Author And Source

좋은 웹페이지 즐겨찾기