ORGANISE YOUR WEBSITE!!!!
Hurray, we are nearly coming to an end of learning the basics of html.CSS is next week I think. These lectures have really built my confidence in the website development and have helped fully understand the do’s and don’ts of Html5. This week we were thought more about structuring our website and sectioning.In my undergrad module I heavenly used <div> to organise my website. To my surprise during this lecture we were told not to use it as often. We were advised to use semantic html such as <section> rather than <div>. <div> can be used for styling but to be used sparingly.
<article> element is also used for sections of a website such as blogs, forums etc.
Additionally in this lecture we learned the importance of <aside>. This code is useful in organising different groups of navigation content i.e special offers.
<footer> for things such as copyright at the bottom of the webpage was also brought up . Along with how <body> code can also be used as a wrapper.
These ideas were practiced in the lab during a tutorial exercise. This is my (bad) attempt.
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'/> <TITLE>Semantic html</TITLE> </head> <body>
<header> <h1> Interneting Is Easy! </h1> <nav> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Blog</a></li> <li><a href='#'>Sign Up</a></li> </ul> </nav> </header>
<article> <header> <h1> Semantic HTML </H1> <p> By Tory McClure. PUBLISHED January 3rd </p> </header>
<p>This is an Example webpage explaining HTML5 semantic markup.</p> <section> <h2> The Document Outline </h2> <p> The <code><header></code> element is one such sectioning element. </p>
<h3> Footers</h3> <p> and so is the <code><footer></code> element.</p> </section>
<section> <h6>Inline Semantic HTML.</h6> <p> The <code><header></code> element is semantic ,but its not sectioning content </p>
</section> <footer> <p>This fake article was written by somebody at Internetingishard.com, which is a pretty decent place to learn how to become a web developer.</p> </footer> </article> <footer> <p>© 2017 Internetingishard.com </p> </footer> <section>
</body> </html>