Curriculum

E-Marketing Tools & Applications

MKTG 4620

0/6

Text lesson

E3A. Understanding Webpages

Understanding the Structure of Web Pages

The Building Blocks of the Web

HTML (HyperText Markup Language) is the most fundamental building block of the web. It is a markup language that defines the structure of a web page’s content. On a web page, we may include paragraphs, bulleted lists, images, data tables, and more. HTML is used to indicate the type of content we have. Let’s consider the following line of content:

My cat is very grumpy

If we choose to make this content a paragraph, we could do so by using paragraph tags like this:

My cat is very grumpy

You can see that the line now includes an opening tag and a closing tag . Our content lies within that tag pair. That is how we indicate that the content is within a paragraph (and not, for example, a list or a quote). The tags and the content they enclose together constitute the paragraph element. The following is the anatomy of an HTML element:

Imagine I want to enumerate the different kinds of pets I have at home. To generate an unordered list (i.e., a list with bullet points, not numbers), I could use the following code:

The pets I have at home include:

<ul>

<li>Three cats</li>

<li>A macaw</li>

<ul>

Earlier, I used to have an aquarium full of exotic fishes. But, I gave it away to my sister. She enjoys having the aquarium at her home.

The output on a web page would look something like the following:

As you can see, the first element is a paragraph, the second element is an unordered list (which includes three other elements — list items), and the third is another paragraph. If I wanted to generate an ordered list (i.e., with the numbers 1, 2, and 3 instead of the bullets), all I would have done is use <ol> and </ol> instead of <ul> and </ul>.

Basic Structure of an HTML Document

So, an HTML document consists of elements, which are represented by tags. These tags define the various components of a web page, such as headings, paragraphs, images, and links. So far, we have looked only at code snippets (i.e., segments or parts of code). If we have to write the code for a whole web page, we need to include these essential tags to generate the basic structure of an HTML document:

<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element that wraps the entire content of the web page.
<head>: Contains metadata, including the title, character set, and links to CSS files.
<body>: The main content area, where all visible elements are placed.

Example: Basic HTML Structure

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Website</h1>

This is a paragraph within a simple HTML page.

</body>

</html>

In this example, the <!DOCTYPE html> declaration defines the document type. Because it is a declaration rather than a tag, it does not need a corresponding closing item. The <html> tag encloses the entire HTML content. The <head> section includes the web page’s title, and the <body> section contains the visible elements. Each of these must have a corresponding closing tag. Practical tip: Type the code snippet in the preceding example in a text editor and save the document with the name my_first_web_page.html. Then, locate that file and double-click on it with your mouse. You will see the resultant web page generated by that code. Important: Using a text editor to write code instead of a word processor is far more convenient. Read about the differences between text editors and word processors in this article and this blog post. Notepad is a free text editor included with Microsoft Windows. While you can use it to write code, Notepad++ is a far more convenient text editor. I strongly encourage you to download and install it on your machine. If you are a Mac user, please read this article. For additional details on using text editors, visit this page on HTML editors on W3 Schools.

Basic HTML Tags

Essential HTML Tags

HTML tags are the building blocks of a web page. Some of the most commonly used tags include:

Headings: <h1> to <h6> define headings with <h1> being the highest level.
Paragraphs: defines a paragraph.
Links: <a> defines a hyperlink.
Images: <img> embeds an image.
Lists: <ul> and <ol> define unordered and ordered lists, respectively, while <li> defines list items.

Example: Using Basic HTML Tags

<h1>About Me</h1>

My name is Jane Doe, and I am a web developer.

<!– This is an HTML comment. It is not displayed in the browser –>

<!–

HTML comments can span multiple lines.

Everything within the comments tags

will be suppressed.

–>

<a href=”https://www.example.com”>Visit my website</a>

<ul>

<li>JavaScript</li>

</ul>

Nesting HTML Elements

When one element is contained within another, we call that nesting. Look at how the three pairs of <li> tags are nested within the <ul> tag in the preceding example. Also, multiple elements are usually nested within the <HTML> tag. Shown below is an example of nesting within a paragraph.

My cat is very friendly.

Because we intended to emphasize the word “very,” we wrapped it within the and tag pair. We could also have written the following:

My cat is very friendly.

In this instance, the phrase “very friendly” will appear in bold. A critical caveat here is that we must never overlap tag pairs. Tag pairs must be entirely within another tag pair (or completely outside it). The following is an example of incorrect code:

My cat is very friendly.

Do you see how the and the tags overlap? That is incorrect! If you make an error like this, the browser will try to guess what you intended, and your results could be unreliable. Another way to indicate the significance of content is by enclosing it within the and tag pair. While the tag makes the content bold, the tag generates italicized output. Imagine we want some content that is both in italics and bold. We could then use either of the following methods.

My cat is very grumpy this morning.

My cat is very grumpy this morning.

In both preceding cases, the phrase “very grumpy” would appear as very grumpy. Notice that we have not violated the “nesting rule” in the two preceding code snippets. However, a violation occurs if we write the following.

My cat is very grumpy this morning.

In the preceding line, the and elements overlap, violating the nesting rule.

Empty HTML Elements

Some HTML elements have no content. Consequently, they do not need a closing tag. One example is — the tag for a line break. Look at the code below:

Roses are red Violets are blue I can write HTML code And so can you

The resultant output would look something like the following:

While we wrote the code for the preceding output in a single line, it would be much more legible to us (humans) if we wrote it in the following format instead:

Roses are red 
Violets are blue 
I can write HTML code 
And so can you

Now is an excellent time to inform you that the line breaks and formatting in the body of the code have no impact whatsoever on how the web page displays. The formatting in the source code (that is, the code we write), including the indentations and the line breaks, is for the benefit of human eyes. The browser would not care if you wrote all the code in a single line (as long as you followed the rules of HTML syntax). However, it would be prohibitively challenging, if not impossible, for humans to figure out the code and spot errors and omissions.

HTML Conventions

While using upper and lowercase (and even mixed case) is permissible in element names — such as BODY, body, and bODy — you should always use lowercase for element names. This convention is universally accepted by developers and professionals in the field. However, please be mindful that there is one exception. There is a document type declaration on the first line of an HTML file. In that, the word DOCTYPE is always in uppercase and preceded by the exclamation mark, as follows: <!DOCTYPE html>

Filename Conventions

While technically uppercase, lowercase, and mixed-case characters are permitted in filenames, for many practical reasons, it is best to choose file names using the following conventions:

Only lowercase alphanumeric characters
No special characters, except – (dash) and _ (underscore).
No spaces within the name of the file (use dash or underscore) to separate words
Do not begin a filename with a number
HTML files must be saved in the text format
HTML files must have the .html or .htm extension (Choose one and use it consistently).

Consequently, the following are examples of poor filenames:

Monkey’sPaw.html
3_body_problem.htm
file#5.html
now or never.html
where-have-all-the-flowers-gone?.htm
million$_baby.html
homepage.HTML
Harry,Ron,andHermione.htm

Acceptable filename formats include the following:

three_body_problem.htm
star_wars_part-iv.html
children-of-men.html
pleasepleaseplease.htm
whatup.html
homework_2024-09-15.html

Conclusion

This lesson covered the basics of HTML, including the structure of web pages and essential HTML tags. Mastering HTML and CSS (covered in a forthcoming lesson) is necessary for anyone interested in web development. These foundational technologies provide the tools needed to build and style web pages, offering endless possibilities for creativity and customization.