Completion requirements
View
2. Semantic Markup
2.7. Using all the semantic tags together
Below is the entire code using the different semantic tags. You can copy and paste it to your editor, then save it as a .html file and open it on any browser to see the output.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Sample HTML5 Layout</title>
- <style>
- article {
- padding:5px;
- border: dotted 3px #ff006e;
- margin-top:5px;
- }
- header {
- padding:0px;
- text-align: center;
- }
- aside {
- margin-top:5px;
- background-color: #f0eaea;
- padding:5px;
- text-align : center;
- font-style: italic;
- border: double 3px #b200ff;
- }
- section {
- padding:5px;
- border: dashed 3px #0026ff;
- margin-top:5px;
- }
- footer {
- padding:5px;
- text-align: center;
- font-weight: bold;
- }
- nav {
- text-align: center;
- }
- ul li {
- display: inline;
- padding-left:5px;
- padding-right:5px;
- text-align: left;
- font-size:16px;
- font-weight: bold;
- }
- </style>
- </head>
- <body>
- <header>
- <h1>This is page heading</h1>
- </header>
- <nav>
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">About Us</a></li>
- <li><a href="#">Contact Us</a></li>
- </ul>
- </nav>
- <article>
- <h1>This is article heading</h1>
- <p>
- Hello world! Hello world! Hello world!
- Hello world! Hello world! Hello world!
- Hello world! Hello world! Hello world!
- </p>
- </article>
- <aside>
- <figure>
- <img src="image.jpg" height="100px" width="100px" />
- <figcaption>Figure caption goes here</figcaption>
- </figure>
- <p>
- Hello world! Hello world! Hello world!
- Hello world! Hello world! Hello world!
- </p>
- </aside>
- <section>
- <h1>This is a section heading</h1>
- <p>
- Hello world! Hello world! Hello world!
- Hello world! Hello world! Hello world!
- Hello world! Hello world! Hello world!
- </p>
- </section>
- <footer>
- <hr/>
- <p>Copyright (C) 2020. All rights reserved.</p>
- </footer>
- </body>
- </html>
The code above will produce the output below:
