Introduction to HTML5

HTML is an acronym for HyperText Markup Language. HTML is the standard for structuring and presenting content of the WWW, in other words, it is the language in which web pages are written. HTML version 5 written HTML5 is the latest and most enhanced version of HTML developed in 2004 by WHATWG to subsume HTML Version 4.01.

Mouse over acronyms written in upper case to see their full meaning. This is done using an HTML tag (<abbr>) we will discuss later on.

HTML5 is compatible with XHTML and HTML 4.01 and easier to write than both. As an open standard, HTML5 embodies some of the best aspects of the web: it works everywhere, and on any device with a modern browser and natively supports features like video and audio playback support, drag and drop capabilities, offline capabilities that let users interact with web apps even when they don’t have an internet connection, 3D graphics and animations, MathML etc. most of which in earlier version of HTML required plugins like Adobe™ Flash, Microsoft™ Silverlight or Google™ gears.

Browsers are programs used to display the presentation (interpret markup) on the web page. A modern browser is an up-to-date browser that supports the features of HTML5, is faster and more secure. The latest version of Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome. Modern browsers are essential to the development of the web, so, take a moment and update your browser – 20 things I learn about browsers and the web

Introduction to CSS3

CSS is an acronym for Cascading Style Sheet. CSS gives programmers an easy, efficient way to define a web page's layout and beautify the page with design elements like colours, rounded corners, gradients, and animation. With CSS we can completely transform the look of a web page in just a couple of minutes, and without even having to touch the markup. In essence, CSS controls how the content is presented to the web page browser.

Image by Christoph Niemann.com

CSS3 is the same as ... you guessed it again, CSS version 3, it has a lot more features than the previous version allowing web developers to easily perform animations and other things using CSS alone and in a lot less code than its predecessor. CSS files have the extension example.<mark>css</mark> and a reference is placed in your HTML code to the file which the browser will then load to present the content.

CSS are sheets containing styles. These styles don't always have to be in an external file. They can also be used inline i.e. directly in a HTML file. We will get to see how later on. It is recommended however, that you keep large styles in an external style sheet.

How is HTML different from CSS?

Simply, HTML tells the web browser the content to present while CSS tells the web browser how to present it. In simple terms, HTML tells the browser to create a header, CSS tells the browser to how the header will be shown in terms of font, colour, etc. Syntactically, HTML has a completely different syntax from CSS.

Text Editor or where to write code.

An editor is a program designed to perform editorial functions. This is where you will write your HTML5 markup and CSS3 styles to be presented by a browser. Most OS come with a built in editor (Notepad and WordPad on Windows OS, TextEdit on Mac OS X).

Although, you can write a HTML markup and CSS styles in the default text editor for your OS, most designers prefer a more friendly and easy to use editor like Sublime Text for Mac and Windows or Notepad++ for Windows which provide line numbers, syntax highlighting among other things. In order to start writing HTML code, you should download either editor or check if you are comfortable with your current editor.

There are also other advanced editors like Microsoft Visual Studio, Adobe Dreamweaver, JetBrains WebStorm if you need advanced functionality

File extensions are important when writing web content. HTML files have the extension .html or .htm and CSS files have the extension .css, so, when saving your html files you should save them as example<mark>.html</mark> or example<mark>.htm</mark> but be consistent, both files are treated differently by the browser. It is recommended that you set your OS to show all file extensions.

Writing code

Open your editor and type the following

  1  <!doctype html>
  2  <html lang="en">
  3  <head>
  4      <meta charset="utf-8">
  5      <title>My HTML5 enabled web page</title>
  6  </head>
  7  <body>
  8      <!-- This is a comment -->
  9      Hello World
 10  </body>
 11  </html>

The above code is a skeleton HTML5 template and we’ll discuss each line soon. The first word or letter(s) before a space enclosed in angle brackets < and > are called tags and are used to tell the browser what to display. The remaining set of words separated by spaces and on the left side of an equal to (=) sign and the first > character are attributes. The set of words or numbers separated by spaces on the right side of an equal to (=) sign are called values. The set of characters between the first set of angle brackets <> and the last set </> is called the tag content. The set of characters between a </ > having the same name as the first set of words in a <> is called the closing tag and it should not have attributes.

That is a lot to take in, perhaps this will make it simpler...

<article class="breaking-news" data-item="first">This text is too short to make the news.</article>

Here, article is the tag name. This is the part that tells the browser, you want to create an article.

Class and data-item are attributes and they are additional piece of information regarding the tag name and how the browser handles it. For example, the class attribute tells the browser how to markup the content using the provided styles. The class attribute value is breaking-news and the data-item value is first. Mostly, attributes and their values are not visible to the user.

The string, "This text is too short to make the news." is the tag content and this is the part that is usually visible to the user after the page is rendered by the browser. The content can also contain another HTML tag this is known as nesting.

And last, </article> is the closing tag and should not contain any attribute. This effectively tells the browser the end of content has been reached.

HTML tags are numerous and we can only touch a few in this chapter. For a complete list of all HTML tags, visit W3C and for the complete list of tags added in HTML5 see W3C HTML5 Elements for more examples and usage of some elements, see SitePoint HTML reference.

<body><div><p><a href="http://www.google.com">Google</a> is the world's most used search engine.</p></div></body>

<body><div><p><a href="http://www.google.com">Google is the world's most used search engine.</p></a></div></body>

Now, let’s examine the piece of code we just wrote.

Old ways in HTML 4.01

or in XHTML 1.0

The new way is simpler and easier to remember, right? right?

The language tag always defines a language as spoken (or written) by human beings for communication of information to other human beings. Computer languages are explicitly excluded. For help choosing a language tag see W3C Choosing a language tag

Notice how the child elements are indented from their parent element. This is not compulsory but it gives you and others that will see and or use your code easier readability. That said, most developers prefer to keep child elements indented from the parent element.

Okay, now let’s see what we just wrote in a browser, save the file as hello.html or any filename you prefer but like we've discussed earlier, the .html part is essential and must be the last characters in the filename. You should have this

To see your code and any other HTML code in the browser, press Control + U. The best way to learn is by reading other people's code and how they work in the browser. If you don't know how a particular command is shown, there is a handy tool in most modern browsers called Inspect Element, right click on the page and select it from the menu.

Questions you might have