This article is the first in a series on a beginner's guide to HTML5/CSS3. In this first entry we cover a brief history of HTML, discuss what HTML and CSS are used for, and then give a basic example that show the fundamentals of an HTML page.
List of Articles in Series
- Writing your First Code
- Building on the Basics
- Styling Your First Web Page
- Laying Out Your First Web Page
Brief History
HTML - HyperText Markup Language
HTML started its life in 1989, when it was designed to be the publishing language of the newly created World Wide Web. It uses the approach of all the markup languages, that originated in the classic paper-publishing, where editors were 'marking-up' the manuscript for revisions. At that time, HTML wasn't a strict definition, but more an idea about how to transfer and link information over the Web.
In the early 90s, everyone got interested about the Web. Different user agents (a user agent is software that renders the content of one HTML document on the specific device on which the agent runs - today we mostly use the word "browser" for user agent and that is what I will do from now on) were born with slightly different implementations of the HTML idea (ENQUIRE, NeXT, HyperCard).
As interest grew, the early inventors of the Web were looking for an agreed approach toward standard HTML. To achieve this goal, the very first HTML standard (HTML+) was created in 1993. It was based on the well known SGML. However, HTML is based on SGML it does not(!) comply with it in all aspects.
1994 was a busy year concerning HTML. That year held the first World Wide Web conference which was in Geneva. During that conference, the need for an update for the HTML standard was discussed. As an answer, ITEF formed a working group that started circulating a draft of the upcoming HTLM 2. That same year, W3C was formed to represent the group of developers who voted for open standards. With the combined effort of all parties, HTML 2 came to life in 1995. HTML 2 declared the foundations of the HTML as we know it today.
With the immense popularity of the Web, in 1995 the power of the browser creators grew. This and the extremely large number of members in ITEFs working group called for the reorganization of the standardization process. Under the coordination and management of W3C, a new group was born, formed from representatives of browser companies and key figures of the Web. This format of decision making is still used in W3C's standardization process. As a result of changes, forming HTML 3 standard was dropped and remade after two years - HTML 3.2 which was out in 1997.
Between the emerging browser wars, W3C kept updating HTML and in late 1999 released the HTML 4 standard.
The power and the success of these standards can be seen by the time passed between HTML 4 and HTLM 5 - the very first draft of HTML 5 was published in 2008 only! HTML 5 is meant to replace all previous versions (where HTML 2 and before was declared as deprecated), while providing full backwards compatibility.
The current state of the HTML 5 standard is 'Candidate Recommendation' (published on February 2014) - and according to the authors, it is meant to be the last version before becoming a 'Recommendation'...
Even though we will not meet the face of HTML 5 in this article, it is important to understand that HTML 5 is not only the new version of the hypertext standard, but also a global name for all the efforts W3C makes to bring web development to a new level. It includes not only HTML itself, but also CSS 3 and a great number of JavaScript libraries. The main idea behind this approach is to bring browsers to a level where it became possible to develop web applications that can compete with desktop applications, without different (and non-standard) plugins.
CSS - Cascading Style Sheet
While working on HTML 2, the issue of separation of concerns arose. The answer was CSS 1 in 1996. As the new form of decision making was already in place, W3C was able to define CSS 1 in a very short time, for the next versions they took almost the same time frame as HTML ... CSS 2 was released year after HTLM 3.2 in 1998. This version went through several updates until it became CSS 2.1 in 2011. The reason for these updates was the growing variety of devices used to display Web pages.
W3C started working on CSS 3 around 1999, but with this version they took a different approach. Instead of creating a single specification, W3C broke CSS into pieces and went to define recommendation for every part alone. W3C also made an unprecedented step, when in 2005 recalled all the already approved recommendations for a second trip and marked them as 'Working Draft' again. That was done to ensure the quality of the recommendations.
Today, of all the parts of CSS 3 (and there are over 20), only 7 got 'Recommendation' status.
What is HTML and CSS used for?
HTML is a markup language that implement the 'mark' part using tags (mostly in pairs of opening-closing tags). These tags are used to define the content (and sometimes the layout) of the information it 'marks'. In theory, HTML can be used for almost every kind of content, but de-facto it used - and became a standard - for web pages almost exclusively.
A pseudo declaration of any HTML tag should look like this:
<tag-name [attribute-list]>[tag-content][</tag-name>]
For example, to declare part of the text as a paragraph, we use the P tag, like this:
<p>This is a paragraph about nothing.</p>
Where inserting an image into our HTML document, we use the IMG tag:
<img src="my_image.png" alt="It's me!">
For every tag, there is a declaration that explains how it has to be used. It can, must or can-not have a closing pair. It it can, must or can-not use attributes and so on. For a comprehensive list of HTML tags and how to use them, see: HTML Reference - w3schools.com.
CSS is used to define the look-and-feel (and sometimes the layout) of an HTML page it's connected to. With CSS, you define how the content - identified by the enclosing HTML tag - will be presented to the end user. The CSS file is built of a list of rules assigned to HTML tags using selectors (those selectors are meant to identify one or more HTML tags). Because CSS is external for the content (HTML), it enables different formatting for different devices with ease.
A CSS rule can be defined like this:
selector {
attribute-name: attribute-value [attribute-value [...]];
[attribute-name: attribute-value [attribute-value [...]];]
}
For example, the default CSS declaration for H2 tag in Google Chrome looks like this:
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
It is important to understand that in modern browsers, CSS is always there. Even if you do not assign your own CSS (and you will not in this article), the browser provides a basic set of rules to achieve some elementary formatting for every HTML document.
Now you may ask how you can alternate those already defined styles? CSS rules are interpreted using a priority scheme where - by default - newer rules are overriding older rules for the same selector. So since the very first CSS is that of the browser and all your rules come later, your rules have the ability to change default design.
To get more information on CSS, you can start here: CSS3 Introduction.
The ... and Sometime the Layout ... Issue
In the early stages of HTML (HTML 2 - 3.2), most layouts were defined using HTML TABLE tag (because HTML was a playground for developers who know nothing of design). The TABLE tag was able to break the page into non-symmetric areas, and create the illusion of true layout. However, this kind of mixing concerns did not please the W3C (and the emerging horde of designers) and the organization pushed the use of CSS for layout, especially with the coming of CSS 2.
We will discuss this in further articles, but for now, it is enough for you to remember that the right way to do layout is using CSS and not tables.
What Do You Need?
For the simple HTML, all you need is a text editor (vim, Notepad) and a web browser (IE, FF, Chrome). However, today HTML is rarely used alone for true development. It is always paired with some JavaScript and some kind of server side technology, like PHP or ASP.NET. For more complex development, it is recommended to use some IDE (that fits your choice of environment). A partial list of such tools (compiled by CodeProject members) can be found here: Your Development Tools.
If you choose some IDE for your development, that IDE will aid and guide you how to store and view your pages. However, if you choose some simple text editor for your first step in HTML development, remember this: save your HTML files with extension HTML, and CSS files with extension CSS. That will enable to you to open them automatically by every browser.
Basic HTML
HTML not only identifies the meanings of its tags but also enforce a basic structure. The minimal HTML page has to contain document type declaration, head and body. Head, in it turn, has to contain a title declaration.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
</body>
</html>
This code represents a valid, but totally useless HTML. Useless as it does not display anything. Now let's add valuable content.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Introduction</h1>
<h2>The first decade</h2>
<p>History of the first decade...</p>
<h2>Later years</h2>
<p>What happened later...</p>
<h1>Why we doing it?</h1>
<p>Some explanation...</p>
<p>Extended explanation...</p>
<h1>Summary</h1>
<p>Summary...</p>
<h1>Contact details<h1>
<h2>Support</h2>
<p>123-123456789</p>
<h2>Development</h2>
<p>123-123456789</p>
</body>
</html>
The code above renders this page in the Google Chrome browser.
Tags We Used...
Now we will get into the explanation of the basic tags we used in the simple HTML from the previous sample.
DOCTYPE
DOCTYPE is a shorthand for Document Type Declaration. It is used as a version stamp, that tells the browser how to interpret the following HTML content, and it will always be the first line of your code. For HTML 5, it is always <!DOCTYPE html>. Earlier versions of HTML used some - more complicated - other strings, you need not know them as you will do HTML 5 only now on!
<!DOCTYPE html>
HTML
HTML tag is the main container (root) of any HTML document. All the HTML documents (except DOCTYPE) must be included between the opening and closing tag of HTML. Inside the HTML tag, the document is organized into two mandatory tags HEAD and BODY.
<!DOCTYPE html>
<html>
</html>
HEAD
HEAD tag is a grouping tag, that contains all the so called 'head elements'. These are elements that are used to define information about the document. It may include meta-data (e.g. for search engines), links to external sources (e.g. CSS files) and others. The only mandatory 'head element' is the TITLE tag, that is used to define the title of the HTML document.
<!DOCTYPE html>
<html>
<head>
</head>
</html>
TITLE
TITLE tag is mandatory, you must have one, and only one of it. Without this, an HTML document will not be valid. It will contain a human-readable string that is presented as the document title for browsers and search engines too.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
</html>
BODY
BODY is the second part of any HTML document. It is the container for all the tags used to define the content of the HTML document - 'body elements'. Surprisingly BODY is not mandatory, and when provided it can be totally empty. I believe that W3C doesn't make it mandatory because there is not much sense in creating an empty HTML document, so no-one will leave it out without good reason, but if he has a good reason, it can be omitted. However, when presented, it must be the second element - after HEAD - inside the HTML tag.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
HEADINGS
BODY can contain several tags to mark the content and within them, the heading tags are used to create - headings, or in other words, to create levels of captions for the HTML document content (just as in this article). Headings are represented by tags H1 to H6, where H1 represents the most important heading and H6 the less important.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<h2></h2>
? </body>
</html>
PARAGRAPHS
Paragraphs are the main building blocks of all text content. It is used to break the text into readable chunks. In HTML documents, a paragraph is created using the P tag.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<h2></h2>
<p></p>
<p></p>
? </body>
</html>
Sample Code
The code in the zip file at the top of the article contains the HTML and CSS for the article itself. It mostly uses the very same tags I talked about in the article. Go ahead and dig in ...
You may also notice that when I explain the role of the tags, I add a link to the corresponding page in w3schools.com. These links can provide you with more information about the tag.
Summary
I'm pretty sure that you have finished this part with more questions than answers, but please be patient and remember it's only the first of twelve articles, so hopefully you will get all the answers you need by the end.
