Block and Inline Elements in HTML

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.

Block and Inline Elements in HTML PDF 

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad