Parts of HTML Tags

0
185
views

What is HTML?

Hi Friends, This is a basic question before digging into HTML that “What is HTML?”
So friends Answer is as simple as its name

H : HYPER
T : TEXT
M : MARKUP
L : LANGUAGE

Hypertext  Denote Hyper Links and Markup Language is Denote for Web pages.

HTML is the language of the World Wide Web. It is the standard text formatting language which we use to create and display pages on the Web.

So My Dear Friends HTML page builds from Tags. Tags are like bricks for any HTML Pages. That’s why there are so many different – different tags in HTML.

Each tag has its own property and meaning and weight to build an HTML page. It Means we have to use a right tag to make the right thing. Then the Question is “How do we remember those tags easily?”. Don’t worries I have an Idea to remember it easily. Just do one thing:

  • Either go through the link of Video Tutorial
  • Or Read this article to know more.

Yes Friends, Now come to the point. We can divide tags into four categories:

Parts of HTML Tags

  1. Blocks
  2. Texts
  3. Media
  4. Form

Generally, any web page is built by above four categories. There is very less chance to be a web page is out of the above categories. If we will learn the above categories of tags fluently then I promise you that you never need me again to solve the situation. Although I will write the separate blog for the same.

Now let’s start with Blocks

Blocks

We use below tags in bloks level

  • <header>Lorem ipsum dolor sit amet</header>
  • <section>Lorem ipsum dolor sit amet</section>
  • <article>Lorem ipsum dolor sit amet</article>
  • <div>Lorem ipsum dolor sit amet</div>
  • <aside>Lorem ipsum dolor sit amet</aside>
  • <footer>Lorem ipsum dolor sit amet</footer>
  • <nav></nav>
<header>Lorem ipsum dolor sit amet</header>
<section>Lorem ipsum dolor sit amet</section>
<article>Lorem ipsum dolor sit amet</article>
<div>Lorem ipsum dolor sit amet</div>
<aside>Lorem ipsum dolor sit amet</aside>
<footer>Lorem ipsum dolor sit amet</footer>
<nav>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">ipsum</a></li>
<li><a href="#">dolor</a></li>
<li><a href="#">sit</a></li>
<li><a href="#">amet</a></li>
</ul>
</nav>

 

Texts

<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<h5>Lorem ipsum dolor sit amet</h5>
<h6>Lorem ipsum dolor sit amet</h6>
<p>Lorem ipsum dolor sit amet</p>
<a>Lorem ipsum dolor sit amet</a>
<span>Lorem ipsum dolor sit amet</span>
<strong>Lorem ipsum dolor sit amet</strong>
<italic>Lorem ipsum dolor sit amet</italic>
<s>Lorem ipsum dolor sit amet</s>/<del>Lorem ipsum dolor sit amet</del>
<blockquote>Lorem ipsum dolor sit amet</blockquote>
<details>
<summary>Lorem ipsum dolor sit amet</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim faucibus orci id mattis. Fusce porttitor diam odio, in facilisis massa efficitur feugiat. Curabitur accumsan ex euismod posuere gravida. Vivamus finibus sapien ut diam semper tempus. Etiam ullamcorper dui ac nulla sodales accumsan. Morbi ullamcorper tortor ac convallis dictum. Pellentesque a hendrerit tortor. Nulla suscipit risus at dignissim consectetur. Morbi consectetur sapien ac lacinia luctus. Morbi a sagittis odio, a finibus nisl. Integer lacinia mi ut sapien porta, quis gravida tortor sollicitudin. Quisque nec arcu consequat diam laoreet condimentum.</p>
</details>
<address>H.N. 1234, Street-9, XYZ, 123456</address>
<table>
<tr>
<th>Lorem ipsum dolor sit amet</th>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</table>
<ul>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet</li>
</ol>

<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<h5>Lorem ipsum dolor sit amet</h5>
<h6>Lorem ipsum dolor sit amet</h6>
<p>Lorem ipsum dolor sit amet</p>
<a>Lorem ipsum dolor sit amet</a>
<span>Lorem ipsum dolor sit amet</span>
<strong>Lorem ipsum dolor sit amet</strong>
<italic>Lorem ipsum dolor sit amet</italic>
<s>Lorem ipsum dolor sit amet</s>/<del>Lorem ipsum dolor sit amet</del>
<blockquote>Lorem ipsum dolor sit amet</blockquote>
<details>
<summary>Lorem ipsum dolor sit amet</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim faucibus orci id mattis. Fusce porttitor diam odio, in facilisis massa efficitur feugiat. Curabitur accumsan ex euismod posuere gravida. Vivamus finibus sapien ut diam semper tempus. Etiam ullamcorper dui ac nulla sodales accumsan. Morbi ullamcorper tortor ac convallis dictum. Pellentesque a hendrerit tortor. Nulla suscipit risus at dignissim consectetur. Morbi consectetur sapien ac lacinia luctus. Morbi a sagittis odio, a finibus nisl. Integer lacinia mi ut sapien porta, quis gravida tortor sollicitudin. Quisque nec arcu consequat diam laoreet condimentum.</p>
</details>
<address>H.N. 1234, Street-9, XYZ, 123456</address>
<table>
<tr>
<th>Lorem ipsum dolor sit amet</th>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</table>
<ul>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet</li>
</ol>

 

 

<h2>Media</h2>

<figure>
<img src=”http://via.placeholder.com/581×480″ alt=”Lorem ipsum dolor sit amet”>
</figure>
<figcaption>Lorem ipsum dolor sit amet</figcaption>
<video src=”https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4″ controls></video>
<audio src=”https://howtolearnvidya.com/wp-content/uploads/2018/01/SampleAudio_0.7mb.mp3″ controls></audio>
<iframe src=”” frameborder=”0″></iframe>

 

 

<figure>
<img src="http://via.placeholder.com/581x480" alt="Lorem ipsum dolor sit amet">
</figure>
<figcaption>Lorem ipsum dolor sit amet</figcaption><br>
<video src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" controls></video><br>
<audio src="https://howtolearnvidya.com/wp-content/uploads/2018/01/SampleAudio_0.7mb.mp3" controls></audio>
<iframe src="https://www.google.co.in/" frameborder="0"></iframe>

 

Form

<form action=”#”>
<input type=”text” placeholder=”Text”>
<input type=”email” placeholder=”email”>
<input type=”tel” placeholder=”Phone No.”>
<input type=”password” placeholder=”Password”>
<input type=”url” placeholder=”Url”>
<input type=”number” placeholder=”Number”>
<input type=”color” placeholder=”Select Color”>
<input type=”file” placeholder=”Text”>
<input type=”hidden”>
<input type=”radio”>
<input type=”checkbox”>
<input type=”range” min=”0″ max=”100″ step=”5″>
<input type=”reset” value=”Reset”>
<input type=”date”>
<input type=”time” >
<input type=”week”>
<input type=”button” value=”Button”>
<input type=”submit” value=”Submit”>
<select name=”” id=””>
<option value=”1″>Lorem ipsum</option>
<option value=”1″>Lorem ipsum</option>
<option value=”1″>Lorem ipsum</option>
<option value=”1″>Lorem ipsum</option>
<option value=”1″>Lorem ipsum</option>
<option value=”1″>Lorem ipsum</option>
</select>
<textarea name=”” id=”” cols=”30″ rows=”10″ placeholder=”Textarea”></textarea>
</form>

<form action="#">
<input type="text" placeholder="Text">
<input type="email" placeholder="email">
<input type="tel" placeholder="Phone No.">
<input type="password" placeholder="Password">
<input type="url" placeholder="Url">
<input type="number" placeholder="Number">
<input type="color" placeholder="Select Color">
<input type="file" placeholder="Text">
<input type="hidden">
<input type="radio">
<input type="checkbox">
<input type="range" min="0" max="100" step="5">
<input type="reset" value="Reset">
<input type="date">
<input type="time" >
<input type="week">
<input type="button" value="Button">
<input type="submit" value="Submit">
<select name="" id="">
<option value="1">Lorem ipsum</option>
<option value="1">Lorem ipsum</option>
<option value="1">Lorem ipsum</option>
<option value="1">Lorem ipsum</option>
<option value="1">Lorem ipsum</option>
<option value="1">Lorem ipsum</option>
</select>
<textarea name="" id="" cols="30" rows="10" placeholder="Textarea"></textarea>
</form>

 

Watch Video Tutorial on Youtube