Basic HTML Codes and Tags for Beginners Tutorial


HTML stands for Hypertext Markup Language. HTML codes are used to make structure of a webpage. When you visit a website, you see website logo, menu, images, and text contents. All these elements are arranged section by section. You need to use basic HTML codes and tags to create these sections.

What is HTML?

Many people think html is a programming language. However, it is not. HTML is a markup language that defines the structure for a webpage. All the websites that we visit daily-to-daily life are structured by this HTML.

To perform this task, there are some html codes or tags. All these tags follow a particular pattern. Based on this pattern, there are some parts of each html tag.

html opening and closing tag

The main parts of HTML tag are as follows:

  • Opening Tag – Normally html tags are written inside an opening and closing angle brackets. Here <p> is the opening tag. Every tag starts with this opening tag.
  • Closing Tag – This is the same as opening tag except that it includes a forward slash at the beginning of the element name. As it stays at the end of an element that is why </p> is the closing tag.
  • The content – The part between an opening and closing tag is the content of that element. Here “Hello World!!” is the content.

 

Some HTML tag does not contain the closing section and the content. This tag is known as Empty Element. This type of element only contains an opening tag. Empty elements use attributes to define its action.

<img src=”images/firefox-icon.png” alt=”My test image”>

<img> is  an empty element. Here there is no closing tag. In addition, src=”images/firefox-icon.png” is an attribute that defines the path for the image. We will discuss this tag in detail.

Basic HTML Codes and Tags

Now we will discuss some of the basic HTML tags that make our webpage well structured. Moreover, you must know as a beginner.

<!DOCTYPE html>

<html>

  <head>

        <title>My test page</title>

  </head>

  <body>

        <p>Hello World!!</p>

  </body>

</html>

There are some html versions to use. <!DOCTYPE html> – this doctype is used for HTML5 version. When you start writing your html code, you should use this doctype at the top of that file.

Here, the basic html tags:

1. <html>

This is the main tag for HTML. This tag wraps all the content on the whole webpage. This html tag is also known as the root element.

2. <head>

The <head> tag acts as a container that contains the necessary stuff that don’t show up in the browser. This includes keywords, page description, and page title. You also add your CSS files inside this <head> section.

3. <title>

This <title> tag stays in <head> section. You will define your web page title in <title> tag. You can see this in your browser’s title bar for every webpage open in the browser. Search engines use this tag to extract the topic of the webpage.

4. <body>

Everything the user sees on a webpage is written inside this tag. It is a container for all the contents of the webpage. You can see <p>Hello World!</p> inside <body> above. If you run that code, your browser will show “Hello World!” text.

5. <h1>-<h6>

There are total 6 tags to declare headings. These are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. We use those tags according to the font size of headings. <h1> has the largest font size and <h6> has the smallest.

The code:

<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>

The result:

This is H1 heading

This is H2 heading

 This is H3 heading

This is H4 heading

This is H5 heading
This is H6 heading

6. <p>

This <p> is known as paragraph tag. You will use this when you create regular text content.

<p>This is a regular paragraph text</p>

7. <br>

The <br> is used when wanting to write a new line. It helps to give line break for web pages. This is an empty element. There is no ending tag.

8. <strong>

The <strong> tag defines important and emphasized text. The part of your text that you want to highline wrap up with this tag. This will add extra importance on that part.

The Code:

<p>This is my <strong>strong tag</strong></p>

The Result:

This is my strong tag

9. <b>

The <b> tag also defines important text. This will bold your text. This tag works like <strong> tag. You can use either of them. They are interchangeable.

The Code:

<p>This is my <b>blod tag</b></p>

The Result:

This is my strong tag

10. <a>

The <a> tag defines a hyperlink, which is used to link a page to another page or one website to another website. This tag uses an attribute to link up pages or websites. The name of that attribute is “href”.

The Code:

<p>Visit my website – <a href=”https://worldtechis.com”>Worldtechis</a></p>

The Result:

Visit my website – Worldtechis

Here my full text is inside of <p> tag. The word “Worldtechis” is inside of <a> tag because I want to create this word as a link back to my website. It contains the attribute href which defines the linked URL.

11. <img> 

The <img> tag is used to add images in websites. This is an empty element. There is no closing tag. <img> uses few more attributes. However, we will discuss 4 of them which are very important for beginners.

The Code:

<img src=”pic.jpg” alt=”HTML logo” height=”42″ width=”42″>

The Result:

html logo

First <img> tag uses the src attribute, which defines the path or URL where the image is located on your drive or on the web. Then it has an alt attribute, where you can use any text you want. If your image is not found or something happens, this text will show up instead of that image.

Finally, height and width attributes are used to define the height and width of the image. You can also do this using CSS. But we are not going to talk about CSS in this tutorial.

12. <ul>

This tag defines an unordered list. You have to use another tag inside this, which is <li>. We will discuss about <li> too. All you need to know right now is <ul> is used to create an unordered list.

13. <li>

You already know where you have to use this tag. This tag contains individual items of an unordered list.

The Code:

<ul>

    <li>France</li>

    <li>Germany</li>

    <li>Italy</li>

    <li>Bangladesh</li>

</ul>

The Result:

  • France
  • Germany
  • Italy
  • Bangladesh

Here, we have an unordered list of some countries. Each country name is an item. All items are wrapped by <ul> to make it an unordered list.

In addition, each name is inside of <li> which makes it an individual item of that list.

14. <ol>

The <ol> tag defines an ordered list. This tag works as like as <ul>. However, it creates an ordered list. An ordered list can be numerical or alphabetical.

The Code:

<ol>

     <li>France</li>

     <li>Germany</li>

     <li>Italy</li>

     <li>Bangladesh</li>

</ol>

The Result:

  1. France
  2. Germany
  3. Italy
  4. Bangladesh

Here, we have an ordered list of names, which has numeric value at the beginning.

15. <table>

This tag defines an HTML table in a webpage. You need to use it in order to create a table. An HTML table consists of some other tags like <tr>, <th>, and <tb>. We will know all of them.

16. <tr>

The <tr> tag defines a row in an HTML table. A table contains one or more table row. Each row may contain one or more <th> or <td>. These are table header and table body.

17. <th>

It defines a header of an HTML table. The value of a table header go inside this tag. The text in <th> elements are bold and centered by default. For example, <th>Month</th>

18. <td>

This tag represents table data. Each value of a table goes inside this tag. The text in <td> elements are regular and left aligned by default.

The Code:

<table>

        <tr>

                <th>Name</th>

                <th>Points</th>

         </tr>

         <tr>

                <td>John</td>

                <td>70</td>

        </tr>

        <tr>

                <td>Mike</td>

                <td>55</td>

        </tr>

</table>

Here, you will see a table of some people with their points. There are 3 rows in this table. The first row has the headers Name and Points.

Other rows have the data of name and point. John is named and 70 is his point.

19. <nav>

The <nav> tag is used to create a navigation menu for a website. You can link your web pages in this navigation. For that, you need to use <a> tag.

The Code:

<nav>

        <a href=”index.html”>Home</a>

        <a href=”about.html”>About</a>

        <a href=”tutorial.html”>Tutorial</a>

         <a href=”contact.html”>Contact</a>

</nav>

Here you will navigation where 4 pages are linked.

20. <div>

The <div> tag defines a division or a section in an HTML page. When we visit a web page, we see everything arranged section by section. This helps to make a page user-friendly.

The code:

<div>

         <h2>Section 1</h3>

        <p>This is a paragraph.</p>

</div>

<div>

        <h3>Section 2</h3>

        <p>This is a paragraph.</p>

</div>

You will separate each section using this <div> tag. So that everyone can understand very easily.

This all is the basic HTML codes and tags must know every beginner. You can start your web programming journey with these tags.

You may also like:

⇒ How to become a full stack developer? – [Salary and Skills]

⇒ World’s 10 Best Freelance Websites to Earn Money Fast

⇒ 15 Amazing Reasons to Become a Freelancer Today

⇒What is bitcoin? Best way to get bitcoin and make money now

⇒ How to Submit Sitemap to Google Search Console Today



I am Robin. Founder of "WorldTechis" community. It is the Largest online learning platform, here you can learn Web development, programming and advance Wordpress tips and tricks. As a professional developer, here I provide all necessary tips related to Programming & Wordpress. Like my Facebook page WorldTechis for the latest update or contact me - [email protected]

Leave a Reply

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