Getting Started with HTML 5
The most common format for publishing documents on the web and creating
web applications is HTML. From its beginning as a relatively simple
language primarily designed for describing scientific documents, it has
grown and adapted to a wide variety needs ranging from publishing news
and blogs, to providing the foundation for full blown applications for
email, maps, word processing and spreadsheets.
As the uses of HTML have grown, the demands placed upon it by authors have increased and the limitations of HTML become more pronounced. HTML 5 is represents the next major step in the development of HTML, introducing a wide range of new features into the language. Authors who are familiar with previous versions of HTML are advised to familiarise themselves with the differences from HTML 4 [HTML4DIFF]
This section provides an introductory tutorial to help get you started with HTML, and is suitable for beginners. Experienced authors may choose to skip this section and proceed to the syntax overview and the element reference.
As the uses of HTML have grown, the demands placed upon it by authors have increased and the limitations of HTML become more pronounced. HTML 5 is represents the next major step in the development of HTML, introducing a wide range of new features into the language. Authors who are familiar with previous versions of HTML are advised to familiarise themselves with the differences from HTML 4 [HTML4DIFF]
This section provides an introductory tutorial to help get you started with HTML, and is suitable for beginners. Experienced authors may choose to skip this section and proceed to the syntax overview and the element reference.
A Basic Document
The goal of this section is to walk people though creating
example01.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example 01</title> </head> <body> <p>This is my first document.</p> </body>
</html>
To begin, we’re going to create a very basic HTML document, which
will also serve as a useful template for future HTML documents.
This document will simply contain a title and short paragraph.
Open a text editor and create a new, empty file. I suggest you save the file as
All HTML documents need to begin with a DOCTYPE. The DOCTYPE is a remnant from the early days of the web. For historical reasons, it is needed to ensure that web browsers interpret the document correctly, rather than using a special compatibility mode designed to replicate the behaviour of older browsers.
In your text editor, type the following on the first line, and save the file.
Open a text editor and create a new, empty file. I suggest you save the file as
example01.html.All HTML documents need to begin with a DOCTYPE. The DOCTYPE is a remnant from the early days of the web. For historical reasons, it is needed to ensure that web browsers interpret the document correctly, rather than using a special compatibility mode designed to replicate the behaviour of older browsers.
In your text editor, type the following on the first line, and save the file.
<!DOCTYPE html>
Because this is required for all documents, it is good practice to
get in the habit of always typing that as the first line in all new
HTML documents you create, so that it never gets forgotten.
An HTML document is divided into two main sections. The head, which is used to contain document metadata, such as the title, stylesheets and scripts; and the body, which contain all of the page’s content. The markup itself forms a tree structure, as illustrated in the following diagram.
An HTML document is divided into two main sections. The head, which is used to contain document metadata, such as the title, stylesheets and scripts; and the body, which contain all of the page’s content. The markup itself forms a tree structure, as illustrated in the following diagram.
Understanding Semantics
In general, the purpose of writing and publishing a document is to convey
information to the readers. This could be any kind of information, such
as telling a story, reporting news and current affairs or describing
available products and services. Whatever the information is, it needs
to be conveyed to the reader in a way that can be easily understood.
A typical document, such as an book, news article, blog entry or letter is often grouped into different sections containing a variety of headings, paragraphs, lists, tables, quotes and various other typographical structures. All of these structures are important for more easily conveying information to the reader. HTML provides the means to clearly identify each of these structures in a way that can then be easily presented to the user. In essence, this is the purpose of markup, and HTML in particular.
Markup is a machine readable language that describes aspects of a document such as its structure, semantics and/or style. Some markup languages are designed solely for the purpose of describing the presentation of the document, such as RTF (Rich Text Format). Others, such as HTML, are more generic and rather than focussing on describing the presentation, they are designed to focus on describing the meaning or purpose of the content and leave the presentation for another layer to deal with.
HTML provides a wide variety of semantic elements that can be used to mark up various common typographical structures. There are heading elements for marking up different levels of headings, a paragraph (p) element for paragraph, various list elements for marking up different types of lists, and a table elements for marking up tables.
It’s important to distinguish between the structure and semantics of content, which should be described using HTML, and its presentation. In one document, a heading may be presented visually in a large bold typeface with wide margins above and below to separate it from the surrounding content and make it stand out. In another document, a heading may be presented in a light coloured, italic, fancy script typeface. But regardless of the presentation, it’s still a heading and the markup can still uses the same basic elements for identifying common structures.
A typical document, such as an book, news article, blog entry or letter is often grouped into different sections containing a variety of headings, paragraphs, lists, tables, quotes and various other typographical structures. All of these structures are important for more easily conveying information to the reader. HTML provides the means to clearly identify each of these structures in a way that can then be easily presented to the user. In essence, this is the purpose of markup, and HTML in particular.
Markup is a machine readable language that describes aspects of a document such as its structure, semantics and/or style. Some markup languages are designed solely for the purpose of describing the presentation of the document, such as RTF (Rich Text Format). Others, such as HTML, are more generic and rather than focussing on describing the presentation, they are designed to focus on describing the meaning or purpose of the content and leave the presentation for another layer to deal with.
HTML provides a wide variety of semantic elements that can be used to mark up various common typographical structures. There are heading elements for marking up different levels of headings, a paragraph (p) element for paragraph, various list elements for marking up different types of lists, and a table elements for marking up tables.
It’s important to distinguish between the structure and semantics of content, which should be described using HTML, and its presentation. In one document, a heading may be presented visually in a large bold typeface with wide margins above and below to separate it from the surrounding content and make it stand out. In another document, a heading may be presented in a light coloured, italic, fancy script typeface. But regardless of the presentation, it’s still a heading and the markup can still uses the same basic elements for identifying common structures.
