1 minute html tutorial - semantic document structure by article, section, nav, aside and footer tags
TRANSCRIPT
![Page 1: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/1.jpg)
1 Minute HTML
<article>, <section>, <nav>, <aside> and <footer>
Semantic Document Structure
![Page 2: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/2.jpg)
Let’s look at document
structure by…
![Page 3: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/3.jpg)
time.com
example of document-style page
![Page 4: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/4.jpg)
![Page 5: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/5.jpg)
Article
![Page 6: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/6.jpg)
ArticleSidebarContent
![Page 7: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/7.jpg)
Navigation Menu
ArticleSidebarContent
![Page 8: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/8.jpg)
Navigation MenuHeader
ArticleSidebarContent
![Page 9: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/9.jpg)
Navigation MenuHeader
ArticleSidebarContent
![Page 10: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/10.jpg)
Navigation MenuHeader
ArticleSidebarContent
footer
![Page 11: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/11.jpg)
Navigation MenuHeader
ArticleSidebarContent
footer
This is … Typical HTML
Document Structure
![Page 12: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/12.jpg)
Navigation MenuHeader
ArticleSidebarContent
footer
HTML 5 introduced new tags
to structure a document
![Page 13: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/13.jpg)
Navigation MenuHeader
ArticleSidebarContent
footer
![Page 14: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/14.jpg)
<nav><header>
<article><aside>
<footer>
![Page 15: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/15.jpg)
![Page 16: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/16.jpg)
![Page 17: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/17.jpg)
![Page 18: 1 Minute HTML tutorial - Semantic Document structure by article, section, nav, aside and footer tags](https://reader033.vdocument.in/reader033/viewer/2022042723/587d6f901a28ab32318b7821/html5/thumbnails/18.jpg)
Later lessons to review
what contents go into
each of the tags