HTML – Commonly Used Tags

Let’s learn about some commonly used tags in HTML

Headings

<h1> </h1> is the largest heading tag you can use in HTML. The heading tags are used to structure the content inside the webpage.

<h1> This is the heading! </h1>

<h2> </h2> is the second largest heading tag in the HTML.

The other heading tags are: <h3>, <h4>, <h5>, <h6>

List

Another common structure we use is a list. We have two kinds of lists; ordered and unordered and we have separate tags for them.

  1. Ordered.

Ordered list is a numbered list. It is formed using <ol> </ol> tags. Inside the <ol> tag, we mark each list item in <li> tags. Look at example below:

<ol>

<li> First item </li>
<li> Second item </li>
<li> Third item </li>


</ol>
  • Unordered.

This is an unordered list. It does not have any orders. It is formed using <ul></ul> tags. Like ordered, we also mark each list item in <li> tags. Look at the example below:

<ul>

<li> First item </li>
<li> Second item </li>
<li> Third item </li>


</ul>

Images

To make our web pages look good, we often use images. The HTML tag for images is <img>. This tag does not have any closing tag. However, the image tag has extra attributes with which we indicate the source of the image, width and height of the image, the alternative text of the image, etc.

Let’s look at example below:

<img src = “https://source-url-of-the-image” alt = “alternative-text” width = “300”>

Notice how we use attributes inside the tag itself.

Src indicates the source of the image.

Alt indicates the alternative text of the image often used by search engines.

Adding Links To The Page

A webpage becomes helpful if we can use a link in the webpage that points to the other webpage. We can refer a page inside our own website or some other website. We use <a></a> tags to put links in the HTML. Look at the example below:

<a href = “https://url-of-the-page”> Anchor Text </a>

Here href is the attribute of <a> tag indicating the URL of the page and Anchor Text is the text on the link. Notice that we use Anchor Text between <a> and </a>

Paragraph

A paragraph tag is used to put the text into the HTML. Look at the example below:

<p> This is a paragraph. It will show up as a chunk of text on the webpage </p> 

There are other HTML tags you can use to create complex HTML structures such as Tables, divisions, and a lot more. However, you don’t need to remember all of them. The trick is to search them up whenever you need one. For example, you might search How to create a table in HTML when you need to have a table on your webpage. After frequent usage, you will be able to remember all of them.

The structure of all the HTML tags stays the same. Each one will have a beginning tag, a closing tag, some attributes and content between the tags.

In the next guide, we will learn how to create a form in the HTML and accept inputs from the user and finally, with all the information we have, we shall build our own HTML page.

Leave a Reply

Your email address will not be published.

three × 4 =