ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML_codecademy] Semantic HTML
      Language/HTML&CSS 2022. 8. 11. 18:19 
      <!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>

      Congrats on completing this lesson on Semantic HTML! Now that you know the benefits of Semantic HTML and how to use it, you can incorporate semantic elements into your website to make it more accessible and to make the code easier to read.

      Let’s review some of the topics we covered throughout the lesson:

      • Semantic HTML introduces meaning to a page through specific elements that provide context as to what is in between the tags.
      • Semantic HTML is a modern standard and makes a website accessible for people who use screen readers to translate the webpage and improves your website’s SEO.
      • <header>, <nav> , <main> and <footer> create the basic structure of the webpage.
      • <section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
      • <article> holds content that makes sense on its own such as articles, blogs, comments, etc.
      • <aside> contains information that is related to the main content, but not required in order to understand the dominant information.
      • <figure> encapsulates all types of media.
      • <figcaption> is used to describe the media in <figure>.
      • <video>, <embed>, and <audio> elements are used for media files.

      Now, apply this knowledge to become a better Web Developer.

      'Language > HTML&CSS' 카테고리의 다른 글

      [CSS] 나를 괴롭혔던 CSS Box model, Good Bye: Position, Display  (0) 2022.10.18
      HTML 문서에 이미지를 삽입하는 방법 2가지  (0) 2022.10.18
      [HTML_codecademy] Forms  (0) 2022.08.11
      [HTML_codecademy] Tables  (0) 2022.08.11
      [HTML_codecademy] Elements and Structure  (0) 2022.08.11

      관련글 관련글 더보기

      댓글

    티스토리툴바