Top 17 HTML Tags Example with Source code
Do you want to create a simple basic webpage? Then learn these HTML examples 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 we know some basic HTML.
If you understand these top 17 HTML tags examples, 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 it 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 helps to understand the Brower to which HTML versions are run on it. And the <!DOCTYPE html> is the latest version of HTML5.
<html>
This is another tag that says a Brower that is reading the HTML. The <html> tag works after the <!DOCTYPE> tag, and it closes with the </html> tag at the end of your file. All text document goes between the tags.
<head>
The <head> tag starts the header section of your file. In the <head> tag stuff goes information that doesn’t appear on your web page. Instead, it contains like metadata for search engines, and info on your Brower. An important thing is the <head> tag will contain your title.
<title>
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 fields 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:
<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, 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:
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 bolded in the text. Previously <b> tag was 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 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:
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:
- First
- Second
- 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 use 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. The <td> works as creating a column and the put data in it.
<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 to see how it works.
This Article is officially present on Learnically, also visit this site.
