About the AdamBots
AdamBots Team 245


HTML Introduction

The document that a web server is written in the Hyper Text Markup Model language. Chrome allows you to view the HTML source of any page by using the view-source:// protocol instead of http://.
You can view the AdamBots’ homepage source here.
A web page is written using the HyperText Markup Language (HTML), which provides the basic structure and content of websites. Modern browsers, such as Chrome, allow you to view the HTML source of any page by using the view-source:// protocol instead of the standard http://.

For example, you can view the source code of the AdamBots homepage.
AdamBots homepage

When you examine the source code, you will notice many < and > symbols, along with text and tags that do not appear on the page when viewed in a browser. This is the HTML code, which instructs the browser how to display the content. One advantage of HTML is that it is human-readable, meaning that once you understand the syntax, it is straightforward to write, read, and modify. HTML uses standard English words for its tags, avoiding complex or unusual symbols. However, like any programming language, HTML requires a precise and well-structured format for the browser to interpret it correctly. Attention to detail is essential—computer code must be unambiguous. If something seems unclear or inconsistent to a human reader, it is likely incorrect from the browser’s perspective. Additionally, HTML serves as the foundation for other web technologies. Cascading Style Sheets (CSS) and JavaScript are layered on top of HTML to control styling, layout, and interactive behavior. Understanding HTML is therefore a critical first step for anyone learning web development, as it forms the backbone upon which websites are built.

HTML’s Format

Tags

HTML consists primarily of tags, which are used to enclose and structure content on a web page. Tags define how the browser should interpret and display the content.

For example:
Not enclosed.< tag >Enclosed content.< /tag >Not enclosed.

In this example, the text Enclosed content is wrapped by a tag, while the surrounding text is outside of it.

The tag without a slash, < tag >, is called the opening tag.
The tag with a slash, < / tag >, is called the closing tag.

Together with the content they enclose, these tags form an HTML element. Most HTML elements require both an opening and closing tag. However, some elements, known as self-closing tags, do not enclose content and therefore do not require a closing tag. Common examples include < img > for images and < br > for line breaks. Using tags correctly is crucial because HTML is a hierarchical language, meaning elements can be nested inside one another. The opening and closing tags must be in the proper order; otherwise, the browser may not interpret the content correctly.

Example of a properly nested element:

This is a bold word inside a paragraph.

Example of incorrect nesting:

This is a bold

word.

Incorrect nesting can cause unexpected display issues or errors. Understanding how tags work and how to structure them properly is a fundamental step in mastering HTML.

The Underline Tag

The underline tag is U. It makes text underlined.

The Bold Tag

The bold tag is B. It makes text bold.

The Italic Tag

The italic tag is I. It makes text italicized.

The Document

HTML elements may contain other HTML elements by enclosing them: 

<parent>
  <one>Hi</one>
  <two>Hello</two>
</parent>

HTML tags must group in the correct order. The following is NOT valid:

We <b> hold <u> these </b> truths </u> to be

Before closing an element, all of its children MUST be closed.

Minimum Valid HTML Page

<!doctype html>
<html>
<head>
<title>Title of Page</title>
</head>
<body>
This is content that appears
on your page.
</body>
</html>

Links

The anchor tag defines links in HTML.

Go to Google

HTML Entities

To write a <, write &lt;. To write a >, write &gt;.

Important Tags