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
However, not all browsers support the all the features of HTML5 – HTML5 test
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.
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
.htm and CSS files have the extension
.css, so, when saving your html files you should save them as
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.
Open your editor and type the following
1 <!doctype html>
2 <html lang="en">
4 <meta charset="utf-8">
5 <title>My HTML5 enabled web page</title>
9 Hello World
To get syntax highlighting
Notepad++: Click the Language menu and select H → HTML
Sublime Text: Click View → Syntax → HTML or in the lower right of the program, beside Tab Size, Click Plain Text and select 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
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.
HTML tags in the content section of another HTML tag should be closed in reverse order of being created. Failure to do this will result in weird behaviours and improper presentation of your content.
<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>
The Improper Nesting example is because the <a> tag was created after the <p> tag and so should be closed before the <p> tag not after.
Now, let’s examine the piece of code we just wrote.
<!doctype html>: This line informs the browser that the syntax used by the rest of the document is in HTML5 much like file extensions are associated to programs on the computer. This is the new document declaration for HTML5 as opposed to the old monstrous way of writing declaration.
Old ways in HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or in XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The new way is simpler and easier to remember, right? right?
line 2; the
<html lang="en-GB">: This line is tells the web browser that this is the start of an HTML page. Notice that this tag is closed on line 11 and all other HTML tags are nested within it.
defines the primary natural language of the document. By natural language, I mean human
language, such as French, Thai or even English. This helps screen readers, because for example the word "six" is pronounced very differently in French and English; this may also help search engines. It's a good idea to define the primary language of a document, especially when you are writing pages for an international audience. - Setting the document's primary language
. You can also set the document's direction in the tag from the default left-to-right to right-to-left using the
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
line 3: The head section contain the header information or meta information. These information describe your web page to the browser and it is not visible to the user. You can use the header section to specify information such as the character encoding of the web page, author information, page expiry, refresh time of the page, description of content, search keywords, location of scripts, location of CSS files, etc. The tag is closed on line 6.line 4:
<meta charset="utf-8"> This tag is used to set the character encoding of the web page. UTF-8 Unicode was a brave effort to create a single character set that included every reasonable writing system on the planet and some make-believe ones like Klingon, too – The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets. So, it is a good idea to declare this to make sure you HTML has full international capabilities.
Note that the
tag does not have a content and closing tag. These type of tags are called empty tags
or void tags
. Examples include
, etc. which we will discuss later.
<title>...</title> is used to specify the title of a document. It is usually visible at the top of the browser window or tab. The content of this tag is what the user sees and it does not take attributes yet. line 7:
<body>...</body>contains the content that will be visible to the user. This is where you would write all content for your presentation (video, audio, images, paragraphs, headers, etc.)line 8:
<!-- ... -->This is an HTML tag used to specify comments. Comments are not visible to the user and are not processed by the browser but can be used in your code for readability. Note that spacing does not matter inside comment tags, the following are all valid
<!--A comment -->,
<!-- A comment-->
<!--A comment-->. You can write them however way you want but be sure to always close the comment tags proper;y using
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
Do tags and attributes all have to be in lowercase letters?
Thing is, HTML5 is flexible and you can chose to write your tags and attributes however way you want.
Do I have to use double quotes to enclose attribute values?
<hEAd> are all the same, likewise
CLASS but the usual convention is to write your tags and attributes in lowercase letters.
You can use either. Single
How do I write <> without the browser thinking it's an HTML tag?
" are valid. In fact, HTML5 allows you to completely ignore quotes when writing attribute values that do not have spaces.
An article like this one has be showing you different tags without the browser thinking they are tags, right? If you have to write angle brackets or any other character not on your key board in HTML, you'll have to use HTML entities or character entities. Below is a table of commonly used HTML entities.
© CodeProject 2014. is written
© CodeProject 2014 or
© Codeproject 2014
Microsoft® Visual Studio ™ is written
Microsoft ® Visual Studio ™
2 > 3 is written
2 > 3
In your code write
2 <1 is written
In your code write 2 &lt; 1
So, to write any of the characters in HTML code, you'd write the one in the entity name or entity number. Note, entity names are case sensitive, you have to type them exactly (they are usually in lower case though) and entity numbers have a
# following the ampersand (&) sign.
The browser removes unnecessary space from your document content, you have to use the HTML entity for non breaking space ( ) to preserve spacing
For a complete list of HTML entity names and numbers, see Free Formatter Entities List
HTML5 adds new elements to the existing ones. which makes it easy to use new web technologies as we discussed earlier.
We also know that HTML elements are written like this
<tag attribute="value">content</>. And in some cases, the content and closing tag is not required.
HTML is like any word processor, you create headers and paragraphs, insert hyperlinks and images, style texts and so on. Only in this case we will be using tags as opposed to commands.
To write headings, use
<h6>. For example
HTML5 elements is written <h1>HTML5 Elements</h1>
HTML5 elements is written <h2>HTML5 Elements</h2>
HTML5 elements is written <h3>HTML5 Elements</h3>
To italicize text or emphasize text use, use
This Text is italicized is written as
<em>. For example.
<i>This Text is italicized</i>
This Text is emphasized is written as
<em>This Text is italicized</em>
To delete/srtike text, use
<del>. For example.
This is no longer important is written
<del>This is no longer important</del>
To create paragraphs use
<p>. For example
This is a paragraph is written
<p>This is a paragraph</p>
HTML is written
<abbr>. This tag uses the title attribute to show a tooltip explaining the meaning of the abbreviation. For example
<abbr title="HyperText Markup Language">HTML</abbr>
We will discuss other tags in another article, you can use the links provided to read more on HTML tags.
Avoid using depreciated tags when writing your code, these tags will be removed in future
30th March, 2014 - Version 1.