First of all here is a Basic HTML5 Webpage Example created in a text editor. Since the following HTML5 code example is simple you could easily type it in your text editor.

First of all save the file as index.html and then drag it into your web browser.

So it should look the same as the below screenshot.

Basic HTML5 webpage example.
Basic HTML5 webpage example.

Also watch a video tutorial to get you started.

Since the team at Mozilla have put together an amazing resource for web design it is worth visiting.
In addition to Mozilla is the W3 schools resource. W3 schools has almost everything for beginner web designers. The basics of html5 are covered and furthermore an extensive list of terms and topics can be found.

On Line 9 we add opening and closing ‘<blockquote>’ tags to the webpage since we want to add some quoted text.

Another Basic HTML5 webpage example with a blockquote
Basic HTML5 webpage example with a blockquote

The ‘blockquote’ text has been indented since it is set by the browser stylesheet. We will cover Cascading Stylesheets, or CSS for short, in later posts as it is especially relevant. Also it is worth keeping in mind that the browsers all have their own stylesheet that is applied to the page. CSS determines either the text type, text colour, font size, alignments and many more styles. We can also create our own styles and consequently override the default css styles set by the browser.

Basic HTML5 Webpage Example

First of all learn the basic html5 webpage example above. All of the tags in the basic html5 webpage example should be learnt since these tags will appear in every html5 document.

In conclusion the points to remember are:

  1. First of all the Doctype
  2. Also the html opening and closing tags.
  3. The head tags because they contain data about data (metadata).
  4. title tags while a html5 document requires them.
  5. Also Body tags for the webpages content.
  6. H1 tags for headings and p tags for paragraphs are another basic html5 concept.
  7. And lastly ‘blockquote’ tags for text that is indented.

More on HTML5


Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *