Semantic vs. Non-Semantic

Essential Question: What is the difference between Non-Semantic and Semantic HTML?

Mastery Objectives:

• SWBAT create a website using semantic HTML.

• SWBAT differentiate between semantic and non-semantic HTML.

Resources: https://www.w3schools.com/html/html5_semantic_elements.asp 

https://www.codecademy.com/learn/learn-html/modules/learn-semantic-html/cheatsheet 

• <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.

1. In the code editor, find the <div id="header"> tag and change it to <header>.

Note: When changing an opening tag, you must find the corresponding closing tag and change that as well. If you don’t, you’ll see some red in your code to indicate the error. https://www.w3schools.com/tags/tag_header.asp 

2. Now, find the <div id="nav"> tag and change it to <nav>. https://www.w3schools.com/tags/tag_nav.asp 

3. In the code editor, find the <div id="main"> tag and change it to <main>. https://www.w3schools.com/tags/tag_main.asp 

4. Now, find the <div id="footer"> tag and change it to <footer>.  https://www.w3schools.com/tags/tag_footer.asp 

5. In the code find and replace <div id="section"> with <section> and replace the corresponding closing </div> with a closing </section>.

Note: When removing the <div> tag, make sure you remove the id attached to it! https://www.w3schools.com/tags/tag_section.asp 

6. Now encapsulate the <h2> and <p> tag with <article>. https://www.w3schools.com/tags/tag_article.asp 

7. Remove the <div id="aside"> tag and replace it with <aside> tag. Don’t forget about the closing tag! https://www.w3schools.com/tags/tag_aside.asp 

8. Create an opening and closing <figure> tag under the closing </section> tag. https://www.w3schools.com/tags/tag_figure.asp 

9. Add an image by using the <img> tag within <figure>. Use the following URL as the source for the image: https://content.codecademy.com/courses/SemanticHTML/dogimage.jpeg

10. Create a <figcaption> under <img> and describe the image using the following description: Wolves (left) were domesticated by humans into dogs (right) https://www.w3schools.com/tags/tag_figcaption.asp

https://www.w3schools.com/tags/tag_img.asp  

11. In the code editor, create an <audio> tag with the attribute controls directly under the commented line. 

12. Add a source for the audio inside the <audio> tag by using this code: <source src="" type="audio/mp3">

Use the following URL as the source for the audio: https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3

https://www.w3schools.com/tags/tag_audio.asp 

13.  Add the following video URL with the attribute controls and wrap it in an opening and closing video tag. https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4 

In between the opening and closing <video> tag, add a text that will show up if the video is unable to load. This text is helpful for screen readers as well! https://www.w3schools.com/tags/tag_video.asp 

14. Add the following gif into your code using the <embed> tag and the src attribute:

https://content.codecademy.com/courses/SemanticHTML/dog-on-beach.gif 

https://www.w3schools.com/tags/tag_embed.asp