ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Basic HTML5 for absolute beginners. Learn to build a website!

Updated on April 9, 2015

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.

HTML5
HTML5

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

© 2015 Joandearc LM

Comments

    0 of 8192 characters used
    Post Comment

    • RonElFran profile image

      Ronald E Franklin 

      3 years ago from Mechanicsburg, PA

      This is the first HTML 5 tutorial I've read. I seldom have to delve into html, but this makes me feel a little more comfortable with this new iteration.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)