This tutorial is an introduction to the basic HTML tags you will often use to create HTML Documents/Web pages. Even though there are over 90 tags in HTML, you usually get to use a handful 99% of the time.
Creating HTML Documents
All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML TAGS
The following are 10 HTML Tags you will use often. As you advance in HTML you will get to know more tags that are also useful.
1. HTML Headings
Description: Defines HTML headings
HTML headings are defined with the <h1> to <h6> tags:
Example
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading</h2>
<h3>This is a h3 heading</h3>
2. HTML Paragraphs
Description: Defines a paragraph
HTML paragraphs are defined with the <p> tag:
Example
<p>This is the first paragraph.</p>
<p>This is another paragraph.</p>
3. HTML Links
Description: Defines a hyperlink
HTML links are defined with the <a> tag:
Example
<a href="https://www.classgist.com">classgist</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
4. HTML Images
Description: Defines an image
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as attributes:
Example
<img src="logo.jpg" alt="sitelogo" width="100" height="100">
5. HTML Tables
Description: Defines a table
Tables are used to arrange data like text, images, links, other tables, etc. into rows and columns of cells
HTML tables are defined with the <table> tag:
Example
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
The border, cellpadding and cellspacing are attributes. Attributes are used to provide additional information about HTML elements.
6. HTML Divisions
Description: Defines a section in a document
Example
<div>This is a DIV container</div>
The Div tag is for creating structure in a web page. You can think of it like a container or a building block. You can put any type of content in a <div></div> tag even other HTML tags
7. HTML Lists
Description: Creates list of items
HTML lists are defined as folows:
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
Example
Unordered list
<ul>
<li>Oranges</li>
<li>Bananas</li>
<li>Watermelons</li>
<li>Pineapples</li>
<li>Grapes</li>
</ul>
Ordered list
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
8. HTML Line breaks
Description: Inserts a single line break
HTML line breaks are defined with the <br> tag:
Example
This text contains a <br> line break
9. HTML Bold Text
Description: Defines bold text
HTML Bold Texts are defined with the <b> tag:
Example
<b>classgist</b>
Anything that appears within <b>...</b> element, is displayed in bold
10. HTML Italic Text
Description: Defines an italic text
HTML italic texts are defined with the <i> tag:
Example
<i> classgist</i>
Anything that appears within <i>...</i> element is displayed in italicized
Conclusion
These 10 HTML tags are what you will use often when creating web pages. Experiment with these tags in your web page – arrange and combine them in different ways. These tags will serve as building blocks for you as you go forward learning how to build web sites.