top of page

Keep Reading !

You can also checkout more topics like...

peep-101_edited.png
EXPLORE COURSES (6).png
EXPLORE COURSES (9).png
EXPLORE COURSES (7)_edited.jpg

HTML for Beginner (Elements, Tags) | Part 1

Before going to html lets talk about what is webpage and website? Each and every day we use internet, right? Now a particular document with some information on internet is called a webpage and a group of webpages somehow connected together in different ways called a website.





Let’s talk about html

 

Hyper Text Markup Language or simply HTML is a markup language to structure a webpage on browser. Hyper Text refers to a text that consists of a link of another text. For Example, In a webpage when you click on a particular a word or text, you are redirected to other site or you are on the same page but different location that word or text is nothing but a Hyper Text. And just like our regular language a Markup Language refers to certain rules that everyone follow when writing html. For browser this rules act like a data. For example, when to underline a word or when to link a word to different page.



A simple HTML code

 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    This is my first 
</body>
</html>

  1. <!DOCTYPE html> declaration defines that this document is an HTML5 document

  2. <html> element is the root element of an HTML page

  3. <head> element contains meta information about the HTML page

  4. <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

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



HTML Elements

 

Before discuss about html elements lets see what is html tag. A html tag is keyword enclosed by angle brackets.


Example:

<h1>This is a heading</h1>

  1. <h1> is called start tag

  2. </h1> is called end tag


An element consist of start tag, some text and end tag.


Example:

<h1>This is a heading</h1>


There are 100+ tags in HTML. In this blog we will learn about:

  1. Heading tags

  2. Paragraph tags

  3. Text Formatting tags

  4. List tags




Headings Tags

 

<h1> to <h6> tags are used to give a heading on HTML document.

  • <h1> defines the highest level heading and

  • <h6> defines the lowest level heading


Example:

<!DOCTYPE html>
<html>
<head>
     <title>HTML Heading</title>
</head>
<body>
     <h1>Heading 1</h1>
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
     <h4>Heading 4</h4>
     <h5>Heading 5</h5>
     <h6>Heading 6</h6>
</body>
</html>

Output:






Paragraph tags

 

<p></p> is used as paragraph tag in HTML.

Example 1:

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

Output:

Example 2:

<p>This is paragraph Line 1.
    This is paragraph Line 2.
    This is paragraph Line 3.</p>

Output:

For one block paragraph <p> works fine (ex. 1) but for multiline paragraphs just like Ex. 2 <p> it will not work properly. What we will do now? We need a line break, right? So, for line break we have <br> tag. For br no need to give close tag. Its is called empty tag. Its useful for writing poem or address.

Example:

<p>This is paragraph Line 1.<br>
    This is paragraph Line 2.<br>
    This is paragraph Line 3.</p>

Output:

<pre></pre> tag is used for preformatted text its more reliable for poem writing in HTML.

Example:

<pre>Line 1
     Line 2
Line 3</pre>

Output:




Text Formatting Tags

 

<!DOCTYPE html>
<html>
<head>
    <title>HTML Text Formatting Tags</title>
</head>
<body>
    <b>Bold Text</b><br>
    <i>Italic Text</i><br>
    <u>Underlined Text</u><br>
    <strong>Important Text</strong><br>
    <em>Emphasized Text</em><br>
    <big>one larger than others</big><br>
    <small>one smaller than others</small><br>
    It is <sub>Subscripted Text</sub><br>
    It is <sup>Superscripted Text</sup><br>
    <ins>Inserted Text</ins><br>
    <del>Deleted Text</del><br>
    <mark>Marked Text</mark><br>
    <strike>Strikethrough Text</strike><br>
    <kbd>User Keyboard Input Text</kbd><br>
    <code>Computer Code</code>
</body>
</html>

Output:






List tags

 

List tags types:

  1. Ordered list

  2. Unordered list

  3. Description list


Ordered List(<ol> tag)

<ol type="i">
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
</ol>

type:

'i' -- defines lower roman numerical

'I' -- defines upper roman numerical

'a' -- defines lower alphabets

'A' -- defines upper alphabets

'1' -- defines numbers

Note: </li> stands for list items


Output:


Unordered List(<ul> tag)

<ul type="circle">
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
 </ul>

Type: disc | circle | square


Output:


Description List(<dl> tag)

<dl>
  <dt>List 1</dt>
    <dd>item 1</dd>
    <dd>item 1</dd>
  <dt>List 2</dt>
    <dd>item 1</dd>
    <dd>item 1</dd>
</dl>


Output:


Recent Posts

See All
bottom of page