Laying out your Html
Code on Html Page
This is the html we should have on our page at this point.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="description" content="Description of your webpage."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="ourstyles.css" rel="stylesheet" type="text/css"> <link href="ourmobile.css" rel="stylesheet" media="screen and (max-width:999px)"> </head> <body> </body> </html>
Layout Tags
| <!-- Comment --> | Comments you can make that does not appear on web page. Great for programmers notes. |
| <div></div> | Block element used for laying out sections of your webpage. An id selector <div id="footer"> is used for styling the div. |
| <header></header> | html5 semantic layout tag. This tag is used to make the header which is at the top of the page and stretches all the way across it. All of the semantic tags requires extra programming to work in older browsers. |
| <nav></nav> | html5 semantic layout tag. Used for navigation menu. |
| <article></article> | html5 semantic layout tag. Used for main content area. |
| <section></section> | html5 semantic layout tag. Used for a section such as a subsection of a bigger topic. |
| <aside></aside> | html5 semantic layout tag. Used for a box placed in the article section or beside article section. |
| <footer></footer> | html5 semantic layout tag. Used for the footer at bottom of page. |
| <h1></h1> to <h6></h6> | These are your heading tags. h1 being the most important and h6 the least important. It is important to use these correctly. H1 would be your most important heading like web site name at the top. h2 the next important. h3 a category and h4 subcategories of h3 section. |
| <p></p> | Paragragh tag. Use it for paragraphs. |
We will finish this on the next page--->