Basic HTML5 for absolute beginners. Learn to build a website!
What is HTML?
Hypertext Mark-Up Language, or HTML, is basically a language used between computers so that they can communicate with each other. Websites are stored on a server, which when requested by your internet browser, sends the website information from the server to your internet browser so that you can access the information.
Whilst there is numerous mark-up and programming languages which are used in the development of websites, the basic structure of a website is created using HTML. The appearance of that information, such as colors, positioning and such is performed by using another language called Cascading Style Sheets (CSS).
So what is HTML 5?
HTML 5 is an updated version of HTML. Whilst it serves the same purpose as HTML, it has had some functionality added and some removed. The elements that have been added assist in making your coding semantic, which in turn make it easier for search engines to read and rank the website contents.
To assist your learning
Semantic Mark-up
Semantic mark-up means that the coding is more logical. It is easier for developers to read and it is easier for search engines to read.
For example, in the past to code a footer onto the web page using HTML we would write a line such as:
<div class="footer">Copyright 2015</div>
This would allow us to use CSS to style the class "footer". However, with HTML5 and the emergence of semantic mark-up, we now have an element called footer. Therefore, using HTML 5 that same line of code would instead look like this:
<footer>Copyright 2015</footer>
Other semantic elements added with HTML5 include:
<header>
<nav>
<section>
<main>
<article>
<aside>
<footer>
An explanation of the elements
Each element has it's own purpose. Some are self explanatory, others you may be left scratching your head wondering "What on Earth is that supposed to mean!".
Header
The header element is quite self explanatory, but we will explain it anyway because there are some aspects of it that even those experienced in HTML may not know. Header is a container that usually sits at the top of the page, it contains things such as a logo, a heading, a page title and possibly a navigation menu. The not so widely known fact is that the header element doesn't only have to be used at the top of the page, it can be used to also hold a header for another element further down the page.
Nav
Nav is used to contain the navigation menu, which is made up of links to the other pages on the website.
Section
The section element should be used to contain parts of the page which you count as sections. For example, if you have a section on your web page that has an announcement you could wrap this in a section tag as it is a section that is to be presented as a standalone object on the web page.
Main
The main element is just that, the main part of the web page. Headers, sidebars and footers should not be displayed inside the main element - only the main content of the page. For example, if your writing an "about me" page you would have your header, nav, footer and maybe a side bar as separate elements. Your main element would be the part that contains all of your information about you.
Article
Article is used to display a standalone piece of content. This could be something such as a blog post or anything else which would still make sense if it was not on that web page, but on its own page.
Aside
An aside element is also used as a standalone element, however, it must be in relation to the content that is surrounding it. For example, it could be used to contain a group of links that are associated with the main content of the page.
Footer
The footer element is used to contain the information that you wish to display at the bottom of your page on every page. Usually this will include copyright information and possibly some further information about the website author or links to policies and such.
HTML 5 Basic Template
Below is a basic HTML 5 template that you can copy to get started coding.
The important parts to note:
- We need to declare the document type as html so that it can be read
- Information in the head of the document is not displayed on page. We use this to link to other scripts our page might need to function, to link to our CSS file and to set the page title (displayed in the tab above your browser address bar), along with many other possibilities.
- The information that we want displayed on our web page has to be between the <body> and </body> tags.
- H1, h2, h3 etc. are heading tags. They indicate the importance of the heading, with heading 1 being the most important.
- The p tag indicates a paragraph.
- The ul tag indicates an un-ordered list, a list that is not numbered. If we wanted our list to be numbered we would use the tag ol.
- Within our list, we then have li elements. These indicate that each of those are an item in the list.
- <a href=..... this is used to make a link. Between the quotation marks we place the link to the page we want to link to. and between the angle brackets we place the text will be displayed on screen. For example <a href="this is the address of the page we are linking to">This is the text that will be displayed on screen, it should explain where the link will take us</a>.
A basic structure of a HTML 5 web page
<!doctype html> <html> <head> <meta charset="utf-8"> <title>This is the title of the page</title> <meta name="description" content="Anything that is in the head of the document is not part of your page content"> <meta name="author" content="Joandearc"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <h1>This is the header container.</h1> <p>Inside here you may have a logo and a website title or even a navigation bar.</p> <p>However, we will put the navigation bar outside of the header for this example</p> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <main> <h2>This is where our main page content sits.</h2> <p>We would write our content here that is individual to this page.</p> <p>We can add images, videos or whatever we like in here.</p> </main> <div class="sideBar"> <h3>We can use a div, with a class name.</h3> <p>Which allows us to style the div individually using CSS.</p> <p>Because it is a class we can reuse the name sideBar to achieve the same styling across all of our pages.</p> </div> <footer> <p>In our footer we would generally put our copyright information.</p> </footer> </body> </html>
Video tutorial to learn HTML 5, part 1
Video tutorial to learn HTML 5, part 2
Video tutorial to learn HTML 5, part 3
Video tutorial to learn HTML 5, part 4
Video tutorial to learn HTML 5, part 5
Video tutorial to learn HTML 5, part 6
Helpful websites to get you started
- HTML & CSS | Codecademy
This website provides you with interactive activities that you complete while learning. You earn badges when you complete tutorials. It is a great site that helps you to be able to see exactly the result of what you are learning - HTML5 Introduction
This website is jam packed full of information and is always useful to keep bookmarked so that you can head back there as a reference to check things. HTML5 is not the only language available. It is definitely worth a bookmark! - Smashing Magazine — For Professional Web Designers and Developers
Smashing Magazine is an online magazine for professional Web designers and developers, with a focus on useful techniques, best practices and valuable resources.
© 2015 Joandearc LM
