Anatomy of an HTML Web Page, HTML Terminology and HTML SkeletonDescription and examples of the structure and terminology in HTML Web Page including the basic layout of any web page and basic tag usage.
Websites and web pages are built using a structured format called HTML. The various HTML tags and attributes affect how the page is displayed in your browser. HTML stands for Hyper Text Markup Language, which is a system for annotating a document in a way that is syntactically distinguishable from the text. It does not matter what language is used to generate the page - be it ASP.Net, PHP or MVC - they all generate the same HTML and send to the browser.
Semantic Structure for HTML Web Page
HTML is very similar to XML in that it uses a strict collection of tags, which have both an opening and closing element. Each tag can have an attribute and a value, and each tag starts with a less than symbol and ends with a greater than symbol.
In the example below we see an HTML tag which represents small text, text which is shown smaller than the standard font size. This tag is known as the "small tag". It has an attribute called class which has a value of mySmallClass. Classes are used to identify groups of tags, and we'll cover them later on. This first bit is known as the starting tag. Next, we have the value of the tag; in this case, it is the string "This is small". Finally, we have the end tag or closing tag. Closing tags always start with a less-than symbol, followed by a forward slash, and then the tag name. Every start tag must have a corresponding end tag.
<small class="mySmallClass">This is small</small> HTML tags can be nested (one tag can contain many others) to create a structure, or to display certain elements differently. In the next example, we see the p tag, which is short for a paragraph. This paragraph tag contains a small tag.
This is a paragraph which contains <small>small text</small> and normal text.
Notice how each tag is opened and closed in sequence. First, the P tag is opened, then the small tag, then the small tag is closed, finally, the P tag is closed. Opening and closing of tags must be done in this order.
The HTML Document
The HTML document is a plain text file which typically has the file extension .html or .htm. It contains the HTML markup (code). It is good practice to start tags on new lines, and indent with each addition of nested tags. This makes it much easier to read, and also easier to spot missing end tags.
An HTML document starts with a document type declaration, which tells the interpreter (usually an internet browser) what type of HTML, what version and what standards are being used.
A good document type to start with is the standard HTML version 4 which is now widely supported. This should be the first line in your HTML document. You should note that the doctype does not conform to the standard HTML tag structure.
<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http://www.w3.org/TR/html4/loose.dtd"> After the doctype we tell the interpreter that we have HTML by including the html tag.
<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
</html> Next, we add the html header tag called head. This is not shown to the viewer but is used by the interpreter to control how the content is shown. It is also used to provide additional information to search engines to better describe the page contents.
<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Your Title</title>
<meta name="description" content="Your description" />
<meta name="keywords" content="Your, comma delimited, keywords" />
</head>
</html> Within the title tag, there are several important tags which are used by search engines and affect how they "see" your web page. These tags should always be present as without them, search engines have to guess.
The tags are - the Title tag - which is used as the page title and is shown on search engine listings as well as at the top of the internet browser. This tag is very important, as without it your page could be shown as "Untitled Page".
The next two tags are Meta tags. These are also important as they allow you to give a brief description and some keywords to the page. The description tag is used by the search engines to display a summary in the listings, while the keywords are used to help find matches with user searches.
All three tags should be used, and all three should be meaningful and relevant to your web page.
After the HTML header, we have the body. This is where all the web page content should go.
<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Your Title</title>
<meta name="description" content="Your description" />
<meta name="keywords" content="Your, comma delimited, keywords" />
</head>
<body>
</body>
</html> Within the body tags, we can add in our previous example text.
<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Your Title</title>
<meta name="description" content="Your description" />
<meta name="keywords" content="Your, comma delimited, keywords" />
</head>
<body>
This is a paragraph which contains <small>small text</small> and normal text.
</body>
</html> You should save the file and load it from within your internet browser. It should look something like this:
Some other tags you can use include:
- <h1> - A heading tag</h1>
- <h2> - A smaller heading tag</h2>
- <i> - Makes text within the open and close tags italic</i>
- <b> - Makes text within the open and close tags bold</b>
Adding Some Style to HTML Pages
At the moment, our page looks a little dull. We can make it look better by adding some images and with the help of the style tag.
We can add images to the web page by using the img tag. Unlike the previous tags we have seen, the img tag does not have a closing tag. It can close itself. This is done by adding the forward slash before the final greater than, as shown in this example.
<img src="picture.jpg" width="100" height="100" /> This will use the file called picture.jpg (stored relative to the current document) with a width and height of 100 pixels.
Cascading Style Sheets
Sometimes it is nice to add colour or to change the font or the size of the text. This is done using CSS, or stylesheet. A style sheet is another text file which assigns styles such as colour, width, height, font, margin and padding, to an HTML tag or group of tags.
A style sheet is applied to a web page using a Meta tag in the header. This should be added anywhere within the
section.<link rel="stylesheet" type="text/css" href="style.css" /> A style can be applied to a class - all the tags assigned to the class will take on the same styles, or to an id - just one tag.
In this example, I have created four paragraph tags. The first has no class or id. The second and fourth have a class of "testClass", and the third paragraph has an id of "testId".
The quick brown fox jumped over the lazy dog.
<p class="testClass">The quick brown fox jumped over the lazy dog.
<p id="testId">The quick brown fox jumped over the lazy dog.
<p class="testClass">The quick brown fox jumped over the lazy dog.
At the moment, when viewing this HTML it looks like this:
We can add a different style to the style.css stylesheet to make things look better.
Firstly, we will look at changing the colour of the paragraph having the id of testId. This is done by using a CSS selector for an ID followed by the id we want to select. We then add the style changes between curly braces.
#testId {color:red} This will change the third paragraph only to red. This only affects one paragraph as you can only have one paragraph with the same id - duplicate ids are not allowed. To select multiple tags, you should use a class. You can have any number of tags assigned to a class.
#testId {color:red}
.testClass {font-size:150%} This will now make the two testClass paragraphs much larger font size. Notice how the first paragraph remains unchanged.
Style sheets are cascading, which means that the style cascade down into nested elements. Only the most specific style is used, so if you apply a style to a paragraph with italic text, the italic text will also use the same style as the paragraph. If you also apply a style to the italic tag, that will be used for the italic tag instead of the style for the paragraph.
Basic HTML5 Skeleton Document to Copy and Paste
I'm always creating basic HTML pages by hand, writing out the same skeleton code time and time again. I've decided to create a page with some basic HTML which I can now use to copy & paste to save time. Here is the most basic HTML5 Skeleton where you can just fill in the blanks.
HTML5 Skeleton Document Markup
On January 22, 2008, HTML5 was initially made available to the general public. In October 2014, a significant update and "W3C Recommendation" status were given to HTML5. Its objectives were to make the language better by supporting the newest multimedia and other new features; to keep the language simple enough for humans to read while also being consistently understood by computers and devices like web browsers, parsers, etc.; and to avoid being as rigid as XHTML. In addition to HTML 4, XHTML 1, and DOM Level 2 HTML are also scheduled to be absorbed by HTML5.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="/css/main.css">
<link rel="icon" href="/favicon.png">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html> XHTML Skeleton Document
The family of XML markup languages includes Extensible HyperText Markup Language (XHTML). It replicates or expands variants of the popular HyperText Markup Language (HTML), which is the language used to create Web pages. On January 26, 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0. On May 31, 2001, the W3C recommended XHTML 1.1. The term "the XML syntax for HTML" is now used to describe XHTML, which is being developed as an XML adaption of the HTML living standard.
<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Title</title>
<meta name="Description" content="Your description" />
<meta name="Keywords" content="Your, comma delimited, keywords" />
<meta equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="your-css-stylesheet.css" />
</head >
<body>
<!-- Your Content -->
</body>
</html> HTML 4 Transitional Skeleton Document
HTML 4.0 was published as a W3C Recommendation in 1997 and introduces familiar concepts such as style sheets, scripting, object embedding and also increased support for right-to-left and mixed-direction text, form improvements for improved accessibility for individuals with disabilities.
There are three DOCTYPES available in HTML version 4 - strict, transitional, and frameset. In Strict deprecated elements are forbidden, In Transitional deprecated elements are allowed and in Frameset mostly only frame-related elements are allowed.
<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html;>
<head>
<title>Your Title</title>
<meta name="Description" content="Your description" />
<meta name="Keywords" content="Your, comma delimited, keywords" />
<meta equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="your-css-stylesheet.css" />
</head >
<body>
<!-- Your Content -->
</body>
</html> 
