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 constructed using a straightforward format known as HTML. The various HTML tags and attributes influence how the page appears in your browser. HTML, which stands for Hyper Text Markup Language, is a system for annotating a document in a way that's easily distinguishable from the text.
Regardless of the language used to generate the page - ASP.Net, PHP, or MVC - they all produce the same HTML and deliver it 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 starts with a less than symbol and ends with a greater than symbol. Tags can have attributes which define properties.
In the example below, we see an HTML tag representing small text, which is 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 tag's value; in this case, it is the string "This is small". Then 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, meaning one tag can contain many others, to create a structure or to display certain elements differently. This flexibility allows you to design your web page exactly as you envision it. The next example demonstrates the p tag, which is short for a paragraph. This paragraph tag contains a small tag, showcasing the versatility of HTML.
This is a paragraph which contains <small>small text</small> and normal text.
Understanding the sequential nature of HTML tags is key. Each tag is opened and closed in a specific order. For instance, the P tag is opened first, followed by the small tag, then the small tag is closed, and at the end, the P tag is closed. This order of operations is crucial to maintain the structure of your HTML page.
The HTML Document
Adhering to good HTML practices is essential. An HTML document, a plain text file with the .html or .htm extension, contains the HTML markup (code). Starting tags on new lines and indenting with each addition of nested tags is a recommended practice. This not only enhances readability but also helps in spotting missing end tags, reducing the chances of errors in your code.
An HTML document starts with a document type declaration, which tells the interpreter (usually an internet browser) what type of HTML, version, and standards are being used.
A good document type 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 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 also provides 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, several important tags are used by search engines and affect how they "see" your web page. These tags should always be present, as search engines have to guess without them.
The tags are the title tags, used as page titles and shown on search engine listings and at the top of the internet browser. This tag is very important; 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. Search engines use description tags to display a listing summary, while keywords 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 dull. We can make it look better by adding images and using the style tag.
We can add images to the web page by using the image tag. Unlike the previous tags, the image 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, adding colour, changing the font, or adjusting the text size is beneficial. This is where CSS, or a stylesheet, comes in. A style sheet, which is another text file, assigns styles such as colour, width, height, font, margin, and padding to an HTML tag or group of tags. This practical application of CSS can significantly enhance the visual appeal of your web page.
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 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 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 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 in font size. Notice how the first paragraph remains unchanged.
Style sheets are cascading, which means the style cascades 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, repeatedly writing the same skeleton code. I've created 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 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 improve the language by supporting the newest multimedia and other new features; to keep the language simple enough for humans to read while 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 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, and object embedding and also increased support for right-to-left and mixed-direction text, form improvements for improved accessibility for individuals with disabilities.
Three DOCTYPES are 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> 
