HTML Basic Examples
This chapter shows small, complete HTML examples. Do not worry about every detail yet; each tag gets its own chapter later.
The HTML Document
Every HTML page follows the same basic shape. It starts with the <!DOCTYPE html> line, then the <html> element, which holds a <head> and a <body>.
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a basic HTML page.</p>
</body>
</html>The <!DOCTYPE html> line is written only once, at the very top. It is not a tag; it simply tells the browser to use modern HTML5 rules.
HTML Headings
Headings are written with <h1> to <h6>. <h1> is the most important and largest; <h6> is the smallest.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Workownix Courses</h1>
<h2>Web Development</h2>
<h3>HTML and CSS</h3>
</body>
</html>HTML Paragraphs
Paragraphs are written with the <p> tag. The browser adds some space before and after each one.
Example
<!DOCTYPE html>
<html>
<body>
<p>Ayesha is learning HTML this month.</p>
<p>Next month she will learn CSS.</p>
</body>
</html>Ayesha is learning HTML this month. Next month she will learn CSS.
HTML Links
Links are written with the <a> tag. The address of the page goes in the href attribute.
Example
<!DOCTYPE html>
<html>
<body>
<p>Ready for the next step?</p>
<a href="https://www.workownix.com">Visit Workownix</a>
</body>
</html>Extra information about an element, like href, is called an attribute. You will learn more about attributes soon.
HTML Images
Images are added with the <img> tag. The file name goes in src, a text description goes in alt, and the size can be set with width and height.
Example
<img src="shop.jpg" alt="A small grocery shop in Karachi" width="300" height="200">If the file shop.jpg is missing, the browser shows the alt text instead. <img> is an empty element: it has no end tag.
Line Breaks
To start a new line inside a paragraph without starting a new paragraph, use the empty <br> element.
Example
<!DOCTYPE html>
<html>
<body>
<p>Workownix Institute<br>Orangi Town<br>Karachi</p>
</body>
</html>Workownix Institute Orangi Town Karachi
How to View the Source
You can see the HTML of any web page:
| Action | Shortcut |
|---|---|
| View the whole page source | Ctrl + U (Cmd + Option + U on Mac) |
| Inspect one element | Right-click it and choose Inspect |
Looking at the source of real websites is a great way to learn, but always write your own pages in your own words.
Exercise
Exercise
Which tag is used to create a link?