ЁЯТ╗
тМия╕П
ЁЯЦ▒я╕П
ЁЯЦея╕П
ЁЯТ╛
тЖР Back to Dashboard
Font Size:

1. Introduction

HTML stands for HyperText Markup Language. It is the language used to create web pages. A web page is written in HTML, and when we open it in a browser, the browser reads the HTML and displays the page with headings, paragraphs, images and links. HTML is not a programming language because it does not perform calculations or make decisions; it is a markup language, which means it uses tags to describe how the content should appear. Web pages on the Internet are mostly built with HTML.

HTML was developed by Tim Berners-Lee at CERN in 1990. Today it is maintained by the World Wide Web Consortium (W3C). HTML has gone through many versions, and the latest version is HTML5. This chapter explains HTML tags, the structure of an HTML document, headings, paragraphs, formatting tags, lists, images, links and attributes, and how to view a web page we have created.

2. HTML Tags

HTML uses instructions called tags. A tag is written inside angle brackets, for example <html>. Most tags come in pairs: an opening tag like <b> and a closing tag like </b>. The closing tag has a slash before the tag name. The text between the opening and closing tags is the content that the tag affects. For example, <b>Hello</b> displays the word Hello in bold. Some tags are empty tags that do not need a closing tag, such as <br> for a line break and <hr> for a horizontal line.

Most tags can also have attributes, which give extra information about the tag. An attribute is written inside the opening tag as name and value, for example <font color="red">. The color is the attribute name and "red" is the value. HTML tags are usually written in lowercase, though browsers accept both cases.

3. Structure of an HTML Document

An HTML document has a fixed structure. It begins with the document type declaration <!DOCTYPE html> which tells the browser that this is an HTML5 page. The whole document is inside the <html> tag, and it has two main parts: the head and the body. The <head> contains information about the page, such as the <title> which appears in the browser tab. The <body> contains everything that is visible on the page, such as headings, paragraphs and images.

The basic structure looks like this: <!DOCTYPE html>, then <html>, inside which there is <head> with a <title>, and <body> with the page content, and finally </html> to close the document. Every web page must follow this structure to display correctly.

4. Headings and Paragraphs

HTML provides six levels of headings from <h1> (largest) to <h6> (smallest). The <h1> heading is used for the main title of the page, and lower levels are used for sub-headings. Headings are written like <h1>My School</h1>. Paragraphs are written with the <p> tag, like <p>This is a paragraph.</p>. The browser automatically adds space before and after a paragraph. To break a line without starting a new paragraph, we use the <br> tag, and to draw a horizontal line we use <hr>.

5. Formatting Tags

HTML has tags to format text. <b> makes text bold, <i> makes it italic, <u> underlines it, and <mark> highlights it. The <strong> tag also makes text bold but with a stronger meaning, and <em> makes text italic with emphasis. For headings of sizes not available in h1 to h6, we can use the <font> tag with attributes, for example <font size="5" color="blue">. The <center> tag centres the text on the page. Formatting tags make the page attractive and highlight important words.

6. Lists in HTML

HTML provides two kinds of lists. An ordered list is a numbered list created with the <ol> tag, where each item is written inside the <li> tag. A unordered list is a bulleted list created with the <ul> tag, also with <li> items. For example, an ordered list starts with <ol>, contains <li> items and ends with </ol>. Lists are used for steps, ingredients, subjects and any group of related items, and they make a page easy to read.

An image is added to a page with the <img> tag. The <img> tag is an empty tag and uses attributes: src for the source file of the image, alt for alternate text shown if the image does not load, and width and height for its size. For example, <img src="pic.jpg" alt="School photo" width="200">. A hyperlink is created with the <a> tag. The href attribute holds the address of the target page, and the text between the opening and closing tags is the visible link, for example <a href="https://www.google.com">Click here</a>. Links connect web pages to each other, which is why HTML is called HyperText Markup Language.

8. Viewing an HTML Page

To create a web page, we type the HTML code in a text editor like Notepad, and save the file with the extension .html or .htm. Then we open the file in a web browser by double-clicking it or by opening the browser and choosing the file. The browser converts the HTML tags into the visible page. Any errors in the tags show up as wrong display, so we should check the code carefully. We can also use web development tools in the browser to inspect and test the page.

Quick Revision Tables

Table 1: Basic HTML Tags

Tag Purpose
<h1> to <h6> Headings, h1 is largest
<p> Paragraph
<br> Line break (empty tag)
<b> Bold text
<i> Italic text
<u> Underline text

Table 2: Tags with Attributes

Tag Attribute Example
<img> src, alt, width <img src="pic.jpg" width="200">
<a> href <a href="https://google.com">Click</a>
<font> size, color <font color="red">Text</font>

Mind Map

flowchart TD A["HTML"] --> B["Tags"] A --> C["Document Structure"] A --> D["Headings and Paragraphs"] A --> E["Formatting Tags"] A --> F["Lists"] A --> G["Images and Links"] A --> H["Viewing the Page"] B --> B1["Opening and Closing Tags"] B --> B2["Attributes"] C --> C1[", , "] D --> D1["

to

,

"] F --> F1["

    ordered list"] F --> F2["
      unordered list"] G --> G1[" for pictures"] G --> G2[" for links"]

Important Diagrams (SVG)

Diagram 1: Structure of an HTML Document

Structure of an HTML Document <!DOCTYPE html> - tells the browser it is HTML5 <html> - the root tag of the whole document <head> <title>My School</title> Info not shown on the page <body> <h1>Welcome</h1> Everything visible on page </html> - closes the document Golden Rule: Every HTML page has for information and for the visible content. The title inside the head appears in the browser tab, not on the page itself.

Diagram 2: HTML Tags at Work

Common HTML Tags in Action <h1>My School</h1> <p>A paragraph of text.</p> <b>Bold</b> and <i>Italic</i> <img src="pic.jpg"> <a href="x.html">Link</a> My School A paragraph of text. Bold and Italic PIC Link Code on the left becomes the page on the right Ordered list <ol> with <li> items gives numbers Unordered list <ul> with <li> items gives bullets Save the code as file.html and open it in a browser Golden Rule: Tags in angle brackets tell the browser how to display text, images and links. Most tags open and close; the closing tag has a slash like .

Common Mistakes

  1. Forgetting the closing tag. Most tags like <b> need </b> at the end.
  2. Writing <b> instead of <br> for a line break. <br> is the empty line-break tag.
  3. Putting the title inside the body. The <title> belongs in the <head>.
  4. Missing the src attribute in an <img> tag, so the image cannot display.
  5. Forgetting the href attribute in an <a> link, so the link does not go anywhere.
  6. Writing HTML tags in capital letters. They work, but lowercase is the convention.
  7. Saving an HTML file with .txt instead of .html, so the browser cannot open it properly.
  8. Using <font> size 1 for a main heading instead of <h1>.
  9. Mixing up <ol> and <ul>. <ol> gives numbered lists, <ul> gives bulleted lists.

Exam Tips

  1. Learn the basic structure: <!DOCTYPE html>, <html>, <head>, <body>.
  2. Memorise at least six tags: h1, p, br, b, i, u, and one use of each.
  3. Know the attributes src for <img> and href for <a>.
  4. Be able to write a small web page code with a heading, a paragraph, a list and a link.
  5. State the difference between <ol> (numbered) and <ul> (bulleted) lists.
  6. Remember that HTML is a markup language, not a programming language, and is maintained by W3C.
  7. Give the file extension .html and mention that HTML5 is the latest version.

Conclusion

HTML is the language of the World Wide Web. It uses tags in angle brackets to describe how content appears, with headings, paragraphs, formatting, lists, images and links. Every document follows a structure with <!DOCTYPE html>, <html>, <head> and <body>, and tags often carry attributes like src and href to add images and connect pages. A page is saved with the .html extension and opened in a browser. HTML is the beginning of web design; in the next chapters we move from designing pages to writing programs, starting with the basics of Python.