Top 17 HTML Tags Example with Source code

Do you want to create a simple basic webpage? Then learn these HTML examples and try your text editor and see how will look in your browser. In this post, we learn 17 simple HTML tags which can help to create a basic webpage. However though the Modern website is built with a user-friendly interface, for this we know some basic HTML.

If you will understand these top 17 HTML tags example, then you will able to create a simple basic webpage. We are Providing the HTML source code of each tag with output. If you want to test this code yourself, then copy this Source code and simply paste into your Text editor and load it in your browser.

Top 17 HTML Tags Example:

<!DOCTYPE html>

You’ll need this <!DOCTYPE html> tag at the beginning of every html document you will create. It help to understand the Brower to which are HTML version are run on it. And the <!DOCTYPE html> is the latest version of HTML5.

<html>

This another tag that which said a Brower that it reading the HTML. The <html> tag is work after the <!DOCTYPE> tag, and it close with the </html> tag at the end of your file. All text document goes between the tags.

<head>

The <head> tag is start the header section of your file. In the <head> tag stuff goes information that doesn’t appear on your Webpage. Instead, it contain like metadata for search engines, and info on your Brower. And important thing is the <head> tag will contain your title.

<title>

17 Simple HTML Tags with Source code Example

This tag is set to the title of your webpage. Put in your webpage title and after all close it.

<head>
<title>Learnically.com</title>
</head>

That’s the name that will be displayed as the tab title when it’s opened in a browser.

<meta>

Like the title tag, metadata is taken in the header area of your page. Metadata is usually used for search engines and it has information about your data. There are various Meta fields, some field is shown below which are used commonly:

Example:

<meta name="description" content="17 simple HTML tags">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="Learnically">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

The “viewport” and “width=device-width, initial-scale=1.0” as contain make sure the display is on the mobile as well as desktop.

<body>

After the <head> tag ends, the <body> tag starts. The <body> tag is the pair tag. You open this with the <body> tag, and close it with the </body> tag. All the content of your webpage is between these tags.

<body>
this is a contain
</body>

<h1 to h6>

The <h1> tag is defined as a title/header of the page. this is used only once on each page. <h2> used as section headers, <h3> used as three sub-headers, and so on from to the <h6>.

  <h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<h3>This is h3 Heading</h3>
<h4>This is h4 Heading</h4>
<h5>This is h5 Heading</h5>
<h6>This is h6 Heading</h6>

Result:

17 Simple HTML Tags with Source code Example

<p>

The <p> tag always starts a new paragraph on a new line, because the <p> tag is also a pair tag.

For example,

<p>first paragraph.</p>
<p>second paragraph.</p>

Result:

You can also use CSS styles in your <p> tags, like changing the font size of your paragraph.

<p style="font-size: 150%;">This is 50% larger text.</p>

<br> and <hr>

When we use the <br> tag in the line, then the line is broken at that point and starts again on a new line.

<p>The first line. <br>
The second line (close the tag).</p>

Result:

17 Simple HTML Tags with Source code Example

 

Its work is similar to the <hr> tag. <hr> tag draw a horizontal line on a page with a specific gap

<strong>

Generally, this tag is bold the text. Previously <b> tag is used for bolding a text, but today in html5 <strong> tag is used for that.

One more important thing, you can also use the <b> tag. but is not guaranteed it will work in the future version of HTML, for that we use the <strong> tag. You can use this tag to specify the text.

<strong> Bold text </strong>

Result: Bold Text 

<em>

The <em> and <i> are also similar. The <em> tag is used to italicize the text. It will be possible that you can use CSS will make the text display differently with emphasis and italicized.

<em>An Italic line.</em>

Result: An italic line

The <i> tag is still working but it does not guarantee the <i> tag work in future versions of HTML.

<a>

The <a> tag, this tag creates links. A simple link looks like this:

<a href="https://www.learnically.com/>Go to Learnically</a>

Result: Go on Learnically

The “href” attribute identifies the path of the link. “href” through can show an image or a PDF. Next, useful attributes are “target” and “title.”

The target attribute is used to open the new window or tab. like shown example:

<a href="https://www.learnically.com/" target="_blank">Go to learnically a new tab</a>

The title attribute creates a tooltip. Once you hover over the link then you see this work:

<a href="https://www.learnically.com/" title="This is a tool tip">Hover over this to see the tool-tip</a>

Result: Hover over this to see the tool-tip

<img>

If you want to display your image on your webpage. Then you can use the <img> tag. Simply use the <img> tag then add the attribute namely “src”, and put your image source on it.

Like this…

<img src="@me/photos/pics/ice-age.jpg">

Result:

17 Simple HTML Tags with Source code Example

If you want to resize your image, then in <img> tag use the “width” and “height” attributes and give the value which you want. In the <img> tag, one more attribute is “alt”. it’s used when your image is not displayed by any chance like a server issue or low network connection, then at the place of the image, the “alt” value is shown.

<img src="@me/photos/pics/ice-age.jpg" alt="the name of your image">

If you want to understand how to create responsive images in HTML. Then check out this post. You will understand in an easy way how to create a responsive image

<ol>

With the help of <ol> tag, you can create the order list. That means you can create a number list of items. Each item is between this <li> tag.

<ol>
<li>First </li>
<li>Second </li>
<li>Third </li>
</ol>

Result:

  1. First
  2. Second
  3. Third

In HTML5, you can use <ol reversed> to reverse the order of the numbers.

The “type” attribute tells the browser which symbol is used in the ordered list. For example “1,” “A,” “a,” “I,” or “i” like this…

<ol type="A">

<ul>

The <ul> tag is made an unordered list which it’s simply a bulleted list.

<ul>
   <li>First </li>
   <li>Second </li>
   <li>Third </li>
</ul>

Result:

  • First
  • Second
  • Third

Unordered lists also have “type” attributes, and you can set them into “disc,” “circle,” or “square.”

<table>

Most of the time beginners are used the <table> tag in the wrong way. If you want to use rows and columns according to your information then need to learn <table> tag. For your understanding use this sample HTML code:

    <table>
    <tbody>
      <tr>
        <th>1st column</th>
        <th>2nd column</th>
      </tr>
      <tr>
        <td>1st Row, column 1</td>
        <td>1st Row, column 2</td>
      </tr>
      <td>2nd Row, column 1</td>
      <td>2nd Row, column 2</td>
    </tbody>
  </table>

The <table> and </table> tags are the start and end of the table respectively. And he <tbody> shows the content in the table body. Each row starts from the <tr> tag and the row ends up with the </tr> Tag. And the <th> tag works as the Row header. And the <td> is work as creating a column and the put data in it.

Result:

1st column2st column
1st Row, column 11st Row, column 2
2nd Row, column 12nd Row, column 2

<blockquote>

When you want to quote information then you use the <blockquote>. <blockquote> tag is also a pair tag, it has to do opening as well as closing.

Example:

    <blockquote>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum repellat
    nostrum voluptate porro sunt reprehenderit ipsam fuga deserunt alias
    aperiam ut est, ipsa cum dolores praesentium commodi, placeat enim. Enim
    sint perferendis cumque sapiente animi?
    </blockquote>

Result:

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum repellat
    nostrum voluptate porro sunt reprehenderit ipsam fuga deserunt alias
    aperiam ut est, ipsa cum dolores praesentium commodi, placeat enim. Enim
    sint perferendis cumque sapiente animi?

With these examples, you should learn to create a simple and basic website. You can also try this on your text editor for look how it works.

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!