2020-05-07 从语义化功能入门到完成项目From Semantic HTML Introduction to Project

AlexanderOuyang
883 阅读3分钟

#Introduction to Semantic HTML 语义化HTML简介

When building web pages, we use a combination of non-semantic HTML and Semantic HTML. The word semantic means “relating to meaning,” so semantic elements provide information about the content between the opening and closing tags.

By using Semantic HTML, we select HTML elements based on their meaning, not on how they are presented. Elements such as

and are not semantic elements since they provide no context as to what is inside of those tags.

For example, instead of using a

element to contain our header information, we could use a element, which is used as a heading section. By using a tag instead of a
, we provide context as to what information is inside of the opening and closing tag.

#Why use Semantic HTML?

  1. Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.

  2. SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.

  3. Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other web developers.

To better understand this, you can think of comparing non-semantic HTML to going into a store with no signs on the aisles. Since the aisles aren’t labeled, you don’t know what products are in those aisles. However, stores that do have signs for each aisle make it a lot easier to find the items you need, just like Semantic HTML.

#Review复习

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.

, , and create the basic structure of the webpage. defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. holds content that makes sense on its own such as articles, blogs, comments, etc. contains information that is related to the main content, but not required in order to understand the dominant information.
encapsulates all types of media.
is used to describe the media in
. , , and elements are used for media files.

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

#Quiz测试

#Project完成纽约博客的项目

#Code代码如下

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>   
     <nav>
       <ul>
         <li><a href="#blog"></a>Blog</li>
         <li><a href="#media"></a>Media</li>
         <li><a href="#about"></a>About</li>
         
       </ul>    
     </nav>

     <header>
       <h1>New York City</h1>
     </header>
     <main>
       <section id=blog>
         <article>
           <p>
New York City is made up of five boroughs which include Queens, Manhattan, Brooklyn, the Bronx, and Staten Island. The city is the home of approximately 8 million people. In 1876, France gifted the City of New York what is known as the Statue of Liberty, which is currently located on Ellis Island commonly visited by tourists. However, it took 10 years to assemble and therefore wasn’t unveiled until 1886. Another tourist destination is Times Square. Times Square is commonly known for the big buildings, Broadway shows, and bright neon signs. This famous location was named after The New York Times after the Times moved to that location. Prior to that, it was named Longacre Square. New York City is also known for its bridges that connect the boroughs and allow ease of transportation.
           </p> 

         </article>

       </section> 
       <figure>
         <img src="https://codecademy-content.s3.amazonaws.com/courses/Semantic+HTML/statue-of-liberty.jpeg">
         <figcaption>This is the Statue of Liberty, a popular tourist attraction located on Ellis Island.
         </figcaption> 

       </figure>
       <aside>
         <p>New York City is very popular for the variety of great food it has. Some of the top food items in NYC include:</p>
         <ol>
           <li>Pizza</li>
           <li>Bagels</li>
           <li>Burgers and Sandwiches</li>
           <li>Ramen</li>
           <li>Tacos</li>
           <li>Pasta</li>
           <li>Desserts</li>
         </ol>

       </aside>
       <section>
         <article>
           <h2>The Scenery in NYC</h2>
           <p>While the view in the city is beautiful, the sounds are not as lovely. Below you'll see an example of the view and the sounds you'll deal with in NYC on a daily basis.</p>

         </article>
         <video controls autoplay>
           <source src="https://codecademy-content.s3.amazonaws.com/courses/Semantic+HTML/nyc-skyline-timelapse.mp4" type="video/mp4">
Your browser does not support the video tag.
        </video>
        <embed src="https://codecademy-content.s3.amazonaws.com/courses/Semantic+HTML/nyc-skyline.jpeg">
        <audio src="https://codecademy-content.s3.amazonaws.com/courses/Semantic+HTML/nyc-sounds.mov" controls>
        </audio>

       </section>  
          

     </main>
     <footer>
       <p>Posted by:AlexanderOuyang<br>Contact information: Blogger@NYC.com</p>
     </footer>
   </body>
</html>
avatar
文章
阅读
粉丝