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.
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.
<title>My test page</title>
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:
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.
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.
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.
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.
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.
<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>
This is H1 heading
This is H2 heading
This is H3 heading
This is H4 heading
This is H5 heading
This is H6 heading
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>
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.
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.
<p>This is my <strong>strong tag</strong></p>
This is my strong tag
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.
<p>This is my <b>blod tag</b></p>
This is my strong tag
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”.
<p>Visit my website – <a href=”https://worldtechis.com”>Worldtechis</a></p>
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.
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.
<img src=”pic.jpg” alt=”HTML logo” height=”42″ width=”42″>
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.
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.
You already know where you have to use this tag. This tag contains individual items of an unordered list.
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.
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.
Here, we have an ordered list of names, which has numeric value at the beginning.
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.
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.
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>
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.
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.
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.
Here you will navigation where 4 pages are linked.
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.
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
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: