Html5 is the latest version of html: is your website updated?
Update to html5 from previous versions to get the most out of your website. There are many new features and you may be missing out on some key aspects. Part of 63 Bravo Web Design’s, Services Offered, is Updating a Website. Want to know more about our services? Check out our: About Read More Page.
I am going to run through some of the basics of html5 which is the latest version of html.
Lets start with the declaration <!DOCTYPE> This goes at the top of your html page (very first thing) and is not case sensitive. The declaration tells the browser what html version a website or web page is using. It is not an html tag.
Next are the most basic required tags but not html5 specific:
- <html>Everything goes in here, seen and un-seen.</html>
- <head>Un-seen things go here like the meta, title, links to your favicon, css, js…</head>
- <meta>Many Un-seen things like description, keywords (not really used anymore), author, viewport…</meta>
- <title>The title of your page, every page should have a different title</title>
- <body>Now this is where all your content goes, inside other tags</body>
Below is the minimum required structure:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>New Title For Every Page</title>
</head>
<body>
</body>
</html>
Lets talk Tags in html5: What is New
Before html5, a web page was developed with a <div></div> structure. Within the opening <div> of the different sections, there would be an ID attribute to call that section. Every ID MUST be different and would look like this: <div id=”header”>Your header content goes here</div> It could also be used in other tags and you can link to that ID on a page like this <a href=”#header”>header content</a>. Don’t get confused with <head> and <div id=”header”>, they are completely different. To call on the “header” in your css file would look like this #header { background-color: red; } This would make the background of that div red. In html5 you would not use the #, just header.
Div’s are still used but html5 has introduced new tags or elements, some of which replace many of the common ID’s that were used as industry standard.
Some of the new semantic tags used in html5: Introduce meaning not style
- Article: This tag could be used as a main tag with many other elements in it like <p>, <aside> and <section> tags. It should contain a <header> with a heading like an <h1> tag to define what the article is about.
- Aside: Is somewhat related to the surrounding content but is aside from it. Maybe use for related links.
- Header: Can be used within other elements or as its own tag within the <body> with elements in it. For instants you could have the menu <nav> in the <header> or have the <header> above the <nav> with your logo in it. Also used to hold the heading for other elements.
- Footer: This is pretty self explanatory you might think. It is at the bottom of the page but you can also have it in other elements like an <article> tag.
- Main: Is as the name suggest, where the “main” content goes. It can have many elements is it including all the one I listed above. Just a few years ago we would use things like <div id=”main”> or <div id=”wrapper”>
There are many other elements for html5 but I just wanted to touch on a few of the main ones. In further post I will expand on others. In the mean time checkout our CSS post.
