Getting Started with HTML: Basic Tags - I
Welcome to the second article of HTML tutorial series. In the last article, we have delivered you the basic introduction of HTML and its usage. In this article, we'll discuss all the syntaxes, elements and usage of HTML. In the last article as we have discussed, HTML is the most widely and the fundamental language for front end web development. It is not a language to only be learned by a web developer but everyone should learn it as tons of web pages are developed every day and HTML brings the way for various job opportunities. If you have not read the first article of HTML series yet then you should first consider reading that by clicking here. We know that HTML or hypertext markup language is a language that is used to create web pages. Every browser has inbuild compiler for HTML codes. We also have known about the basic differences between a programming language and a markup language. HTML is basically a markup language and in this article, we'll look deeply into HTML. To write a proper HTML code one must learn the syntaxes of HTML. So let's jump in into the article.
HTML basics
In the previous article, we learned how to use the atom code editor to write the HTML codes. In this article, we'll be using the same for our codes. An HTML code mainly consists of tags to define the actual code. A tag is like keywords we use in programming languages. With tags, a web browser will be able to format and display the HTML code. With the help of tags, a web browser can distinguish between simple content and HTML content. Basically, in HTML three types of tags are used i.e opening tag, content tag and closing tag. Every opening tag has a closing tag. There are even some tags which don't have a closing tag. A web browser reads the HTML code from top to bottom and right to left. So the developer has to write the HTML code accordingly so that the browser can read and display the content. There are some basic rules for using tags. An opening tag must be enclosed in "< >". and a closing tag is prefixed with a forward slash "/" An opening tag must be ended with the ending tag as mentioned above but there is even some exception. Each tag performs a different function in HTML. Here is an example of how HTML statements are written:
<tag>main content goes here</tag>
Look at how tags(red) are been used in the above statement. The text in between the tags is displayed by the web browser as per the tags are been used. So now let us know how various tags are used.
Document tag
Every HTML document must start with the DOCTYPE declaration. Technically this is not a tag or any other element. The DOCTYPE keyword is used to declare the version of HTML being used. In our previous article, various versions of HTML have been covered. It basically tells the web browser which version of HTML is being used to in the code. As this is a special type of element, this doesn't have any closing tag and doesn't include any content. It is placed in the top of the HTML code and written as follow:
<!DOCTYPE html>
The HTML itself starts with the HTML tag. This is a proper tag and declares the beginning of the HTML code. Every other element and content comes within this tag. It starts as <html> and has an ending tag </html> which declares the ending of the HTML code. This is how it is used:
<html>
content goes here
</html>
Structural tags
These sets of tags are used to define the structure of the webpage. Generally, the HTML code is classified into two body parts i.e head and body.
head tag
The head tag includes all the metadata(data about data ) and the data that is included within this tag is not displayed at the time of page loading. It can contain many lines of metadata and can even have very less or no information as per the usage of the page. It plays a very important and crucial role in a web page. Some of the elements that are included within the head tag are <title>, <style>, <meta>, <base>, <script>, <link>. Out of all these elements, title and meta element has usage in HTML and the rest of the elements are generally in CSS and JavaScript.
<title> element
This element is used to give the title to the web page. It is used in every version of HTML/XHTML. It is placed within the head tag and one HTML document can have only one title element. It has usage when one save the web page to favourite, gives title to the tabs and displays the title of the page in search engines. It is used as:
<head>
<title>HTML tutorial</title>
</head>
<meta> element
This tag is used to define metadata i.e character-set, keywords, description, authors etc on the webpage. This metadata is used to rank a webpage on a search engine. It is used as follows:
<head>
<meta charset="UTF-8">
</head>
In the above example, the charset keyword is used. It is used to specify the encoding type. In this above case UTF-8(Unicode transformation format) has been used that means it can handle any language alone with special characters.
body tag
The HTML body tag displayed the actual content what a developer wants to display on the web page. It includes various other tags to support several elements. It can be included with the text, photos, videos, tables, links etc. Like the head tag, every HTML document includes only one body tag and is placed next to </head> and within the HTML tag. Syntax:
<body>content goes here</body>
<h> tag
This is the first tag that may be included within the body tag. This is the HTML heading tag which is used to display heading, title and subtitles in a document. When some words are placed within the <h> tag it is displayed as bold in the web page. The <h> tag ranges from <h1> to <h6>. The <h1> is the main heading which has the highest level and the size of the letters decreases from <h1> to <h6> where <h6> has the least level or the size is the smallest. Syntax:
<body>
<h1>here goes the heading</h1>
<h2>here goes the heading</h2>
<h3>here goes the heading</h3>
<h4>here goes the heading</h4>
<h5>here goes the heading</h5>
<h6>here goes the heading</h6>
</body>
<p> tag
The <p> tag is the paragraph tag which is used to write paragraphs in a document. The text included inside the <p> tag is phrased into a paragraph by the web browser. The <p> tag can be used multiple times and each time it is used creates a new paragraph. Syntax:
<body>
<P>
This is a paragraph that is being written within the paragraph tag. Every time this tag is used creates a new paragraph.
</P>
</body>
Notice that after the first line their extra spaces are used. But at the time of displaying this paragraph, the extra spaces and lines are terminated.
<br> tag
The <br> tag is the line break tag. It is used in between the paragraph tag to break lines. This is an empty tag that means it doesn't have any ending tag. This tag is used when the designer wants to break the line without creating a new paragraph. Syntax:
<p>
Hey, I am writing a paragraph. <br> So now new line starts.
</p>
<hr> tag
The <hr> tag is used to apply a horizontal line between two paragraphs. Just like the <br> tag this also doesn't have any ending tag as it is an empty tag. This tag is used when the designer wants to separate two paragraphs or lines with a thematic line. Syntax:
<p>
This is a simple example. <hr> A line comes here.
</p>
<b> tag
The <b> tag is the bold tag in HTML. It is simply used to make a letter, word or line in bold format. This tag is used inside of the paragraph tag and the line is included inside this tag that is to be bolded. Syntax:
<p>This is an example of <b>bold text format</b></p>
<i> tag
The <i> tag is the italic tag in HTML. This tag is used to give an italic look to a letter, word or line of text. Just like the bold tag, this is also included inside the paragraph tag and the line of text is included inside this tag that is to be made italic. Syntax:
<p>This is an example of <i>itallic text format</i></p>
<sub> tag
This tag stands for the subscript tag. It is used to define subscript text. The text included within this tag has a lower baseline and smaller font. Syntax:
<p>H<sub>2</sub>O is comprised of Oxygen and Hydrogen</p>
<sup> tag
Just like the subscript tag, The <sup> tag stands for the superscript tag that is used to define superscripts. The text included within this tag has a higher baseline and smaller font. Syntax:
<p>A million has 10<sup>6</sup> zeroes</p>
Phrase tags
These are the set of special purpose tags which are used when there is a need of defining the special structure of different elements. These tags simply deals with the structure of the text. Some of the phrase tags used in HTML are :
- <abbr>
- <mark>
- <q>
- <code>
- <blockquote>
- <dfn>
- <strong>
- <kbd>
Abbreviation tag - <abbr>
This tag is used to abbreviate or acronym texts. When a piece of text is put within this tag, it is displayed underlined in the web browser. When someone hovers the mouse over the abbreviated word, its description is shown. Syntax:
<p><abbr title="Hypertext markup language">HTML</abbr>is a widely used markup language</p>
The title attribute can be used with the <abbr> tag to display the description of the abbreviated text.
Marked tag - <mark>
The marked tag is used in HTML to highlight the text. The text within this tag is highlighted as yellow on the web browser. Syntax:
<p>Text within the marked tag is <mark>highlighted as yellow</mark></p>
Short quotes - <q>
The <q> tag in HTML is used to quote text. When text is included inside the <q> tag is enclosed within double quotes. Syntax:
<p>Elon Musk said: <q>It is possible for ordinary people to choose to be extraordinary.</q></p>
Code tag - <code>
The code tag in HTML is used to display a piece of computer code. The content included inside this tag is displayed in monospaced font in the web browser. Syntax:
<p><code>System.out.println("hello world")</code></p>
Quoting tag - <blockquote>
The <blockquote> tag in HTML is used to enclose content taken from another source. The source URL can be given using a special attribute cite. And the source text can be represented with the <cite> tag. The content within the blockquote tag is usually automatically indented by the web browsers. Syntax:
<blockquote cite="https://www.goodreads.com/quotes">
<p>A room without books is like a body without soul</p>
</blockquote>
<cite>-Marcus Tullius Cicero</cite>
Definition tag - <dfn>
The definition tag in HTML is used to specify the actual keyword of the document. The text enclosed within the <dfn> TSG is declared as the keyword. The keyword is shown in the italic form in the web browser. Syntax:
<p><dfn>HTML</dfn> is used everywhere to create web sites.</p>
Strong tag - <strong>
Strong tag in HTML is used to specify the main or most important element of the content. The text enclosed within this tag is shown in a bold format just like the bold tag. Syntax:
<p>learning <strong>HTML</strong> is just fun</p>
Keyboard tag - <kbd>
The keyboard tag in HTML is used to specify that the content is a user input from the keyboard. Syntax:
<p>press <kbd>cltr</kbd>+<kbd>c</kbd> to copy</p>
The above mentioned are some of the few basics tags that one need to know to write text documents in HTML. Of course, there are a lot more to explore but in this article, we are just including as many tags that are essential for someone to show their document on the web browser. In the next article, we'll be bringing a lot more interesting tags in HTML to make a perfect webpage. We're yet to explore about adding URLs, photos and videos, iframes etc. All the above codes are written with the atom code editor. And stay tuned to our blog to know more about HTML.
If you like this article then please share it and subscribe to our newsletter to stay updated with our blog. Follow us on Facebook.
Comments