Introduction to basic HTML tags


Introduction to HTML Tags


Today we will discuss basic HTML tags. We will try to keep things as simple as possible, this tutorial will be beginner-friendly. If you don't have any prior experience then also you can follow along. 

Today we will start with the basics of HTML you can find all posts related to HTML ( here ).

In this tutorial, we will discuss  
  • What is HTML
  • HTML document structure
  • HTML tags such as heading paragraphs anchor tag etc
  • HTML formatting
  • HTML comments

What is HTML

HTML stands for HyperText Markup Language. 'HyperText" refers to a link that connects different pages to each other. The whole web is created with a link. Link is the most crucial aspect of the web.HTML is the most fundamental component of a web application. It gives structure to the web content.

HTML markup includes special elements such as head, body, header, footer, img, video, audio, nav, etc. These special elements are enclosed within " < " and " > ".

for example : <audio><video> and <img> .

These are called tags which are used to give special meaning to normal text. There are more than 100 hundred tags in HTML. It is not necessary to learn all HTML tags but you should have at least an idea about what they are used for.

HTML tags are case insensitive i.e you can write element name in uppercase, lowercase, or a mixture of both.

for example: <section><Section>, <SECTION> . 

you can write as you want but I prefer writing in lowercase.


HTML Document Structure


The above image represents the HTML boilerplate.

  • The <!DOCTYPE html> tells the browser that this document is an HTML document.
  • The <html> element is the root element of an HTML page it encloses the head and body tag.
  • The <head> element contains meta-information about the document.
  • The <title> element defines a title for the HTML page which is shown at the top in the browser's title bar.
  • The <body> element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element is used to define a large heading.
  • The <p> element is used to define a paragraph.

HTML Tags

Now we will be covering the basics html tags every tag will be explained with suitable example. I will advise you to read everything properly and visit codeply and try to do things in your own way.

Heading

As the name suggests heading tags are used to add headings into web page .There are total 6 heading tags from <h1> to <h6> . <h1> being the largest and <h6> being the smallest.



In the above example, you can clearly see the difference between different heading tags.

  • <h1> is called as start tag.
  • </h1> is called as end tag. It is very important to close the tag.
  • The text between the start tag and end tag is called as the content.
  • Some elements have no content such as <hr> and <br> elements and they are called empty elements. Empty elements don't have closing tags.

Paragraph, Line Break, Horizontal rule



the <p> tag is used to insert a paragraph on the web page. In the above example, you can see how to insert a paragraph in an HTML document. I have created three paragraph elements above, in the second or third element you can see I have added a little bit of space between words but when you notice the result output is  same for all three elements. 

This is because HTML ignores blank spaces you can't add spaces in an HTML document. If you want to add space you can use &nbsp;. In the 4th element, I have shown how you can add space inside the element.

<hr> tag is used to add a horizontal rule to the web page. It is useful when you want to add a partition between different elements. In the above example, you can clearly see what it does.

<br> tag is used to add line breaks in the document. 


Anchor tag


An anchor tag is used to add a link to the web page. Suppose I want to add a link to youtube on my web page this is how I will add it.


  <a href="www.youtube.com"> Youtube </a>

Here href is an attribute we will discuss attribute in depth later but for now, consider attribute as something which provide special information about elements. Here our attribute is href which contains a link to youtube. we have text content named youtube enclosed in the anchor tag.

Div ,span, section, header, footer, & nav  tag

The <div> tag defines a division or a section in an HTML document.<div> tag act as a container for HTML elements.The <div> tag can be easily styled by using the class or id attribute.

The <span> tag is similar to <div> element, but <div> is a block-level element and <span> is an inline element.<span> tag is mostly used for styling different element.

Block level elements are those who take up the entire width of the screen and inline elements are those who take only the required amount of width. Block level element always starts on a new line. an inline element doesn't start on a new line.

The <section> tag defines a section in a document.

<header> tag is used as a container to contain web page navigation links, logo, and other useful information.

<footer> tag defines a footer for a web page it contains copyright information, contact details, sitemap, and back to top links.

The <nav> tag defines a set of navigation links.


HTML Formatting

 

<b> and <strong>  tags have same functionality both are used to make text bold.They are used to represent important tag inside the Document.

<i> and <em> tags are used to italicize the text.They both have same functionality similar to <b> and <strong> tag.

<small> tag is used to make text smaller.

<mark> tag is used to highlight text in the document.

<del> it represents a tag that has been deleted from the document.

<ins>n represents a tag that has been inserted in the document. 

<sub>  sub refers to subscript text.It appears half a text below the normal line.

<sup>  sub refers to superscript text .It appears half a text above the normal line.
 

HTML Comments


< !-- this is a comment -- >


This is how you can add comments in an HTML document. Everything written inside the tag mention above will be ignored by the browser. Comments are useful to write informative code.



I hope now you have a good understanding of HTML. stay tuned for further posts and if you have any suggestion on how I can improve so that tutorials can be more informative do let me know in the comment section below


Post a Comment

0 Comments