Block Elements
- Block elements take the full width of the browser window.
- Block elements start with new lines.
Elements:
i). article:
<article>
<h3> HTML Simplified Series</h3>
<p> This is HTML series by raju_webdev. In this series I covered most of the topics of HTML to learn it in an easy way with PDF.</p>
</article>
ii). aside:
<aside>
<h4> JavaScript Doctory Series </h4>
<p>This series is on JavaScript in which I covered most of the basic concepts to learn JavaScrip</p>
</aside>
iii). div:
<div>
<h3> HTML Simplified Series</h3>
<p> This is HTML series by raju_webdev. In this series I covered most of the topics of HTML to learn it in an easy way with PDF.</p>
<h4> JavaScript Doctory Series </h4>
<p>This series is on JavaScript in which I covered most of the basic concepts to learn JavaScrip</p>
</div>
iv). form:
<form action="">
Name: <input type="text" name="name" id=""> <br>
Last Name: <input type="text" name="lastName" id=""> <br>
<input type="submit" value="Submit">
</form>
v). h1 to h6:
<h1> This is my heading-1 </h1>
<h2> This is my heading-2 </h2>
<h3> This is my heading-3 </h3>
<h4> This is my heading-4 </h4>
<h5> This is my heading-5 </h5>
<h6> This is my heading-6 </h6>
vi). header:
<header>
<h1> HTML Simplified Series </h1>
<p> This is HTML series by raju_webdev. In this series I covered most of the topics of HTML to learn it in an easy way with PDF. </p>
</header>
vii). hr:
<h1> HTML Simplified Series </h1>
<hr>
viii). li:
<li> This is List </li>
ix). main:
<main>
<h3> HTML Simplified Series</h3>
<p> This is HTML series by raju_webdev. In this series I covered most of the topics of HTML to learn it in an easy way with PDF.</p>
</main>
x). nav:
<nav>
<a href="https://html.com/"> HTML </a>
<a href="https://css-tricks.com"> CSS </a>
<a href="https://javascript.info"> JavaScript </a>
</nav>
xi). ol:
<ol>
<li> This is List </li>
<li> This is another List </li>
</ol>
xii). p:
<p> This is HTML series by raju_webdev. In this series I covered most of the topics of HTML to learn it in an easy way with PDF.</p>
xiii). section:
<section> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sapiente odit mollitia laborum consectetur quisquam perferendis, similique dolorum quos! </section>
xiv). table:
<table>
<tr>
<th> Name </th>
<th> Role </th>
</tr>
<tr>
<td> Raju </td>
<td> Frontend Developer </td>
</tr>
<tr>
<td> Jassi </td>
<td> Youtuber </td>
</tr>
</table>
xv). ul:
<ul>
<li> This is List </li>
<li> This is another List </li>
</ul>
xvi). video:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
xvii). footer:
<footer>
<p> @ Copyright All rights resered - Geeks Help</p>
</footer>
xviii). pre:
<pre>
Hi, I am Raju
Freelance Web Developer and Content Creator
</pre>
Inline Elements
- Inline elements take the width which is necessary for the element.
- Inline elements don't start with new lines.
Elements:
i). a:
<a href="https://www.geekshelp.in"> Geeks Help </a>
ii). abbr:
Hi, everyone I am <abbr title="I am Freelance web developer"> raju_webdev </abbr>
iii). b:
Hi, everyone I am <b> raju_webdev </b>
iv). br:
Hi, everyone I am raju_webdev <br>
And I am a Freelance Web Developer
v). cite:
<cite> HTML Simplified </cite> by raju_webdev
vi). code:
<code>
alert('JavaScript');
</code>
vii). em:
<em> This is emphasized text </em>
viii). i:
<i> This is an italic text </i>
ix). img:
<img src="myImage.png" alt="Logo Image of raju_webdev instagram page">
x). input:
<input type="text">
xi). kbd:
<kbd> ctrl </kbd> + <kbd> c</kbd>
xii). small:
<small> This is text <small>
xiii). span:
<span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat modi corporis nulla. </span>
xiv). strong:
<strong> This is strong text </strong>
xv). sub:
H<sub>2</sub>O
xvi). sup:
(a + b)<sup>2</sup>
xvii). textarea:
<textarea name="myText" id="myText" cols="30" rows="10"></textarea>
xviii). time:
Time start from: <time>10:00</time> to <time>20:00</time> every day.
We have already discussed all these tags in depth in previous tutorials. To learn these in-depth you can visit our Learn HTML page.
