payment by upi: sinhamit@icici or payment by bank account name: amit kumar sinha, account number: 2646728782 IFSC code: KKBK0005660 SWIFT: KKBKINBB

Please support if you like my work by payment through upi: sinhamit@icici or payment by bank

account name: Amit Kumar Sinha,
account number: 2646728782
IFSC code: KKBK0005660
SWIFT: KKBKINBB

HTML Elements   in Category: HTML   by amit

🕙 Posted on 2023-04-07 at 18:31:30     Read in Hindi ...

Important HTML tags / Elements

    You have seen various HTML tags and elements used inside <head> </head> element. Now, we should focus on different HTML elements used inside <body> </body> element. Codes and contents (texts) inside <body> </body> element are used to display on the browser. These HTML elements, tags, and JavaScript codes are used along with CSS style rules, which make those codes and contents inside them, beautiful and nice.

HTML containers: box (block-level) elements

    These HTML elements are used as boxes, to contain many different HTML elements. Box type HTML elements cannot be displayed in browsers, except of their background-color(s). Contents (including texts) inside these HTML elements are displayed with or without CSS and JavaScript codes.

    These elements are: <body></body> , <div></div> , <section></section> , <article></article> , <aside></aside> , <nav></nav> , <main></main> , <header></header> , <footer></footer> , <blockquote></blockquote> , etc.

    Many of these HTML elements are also known as SEMANTIC elements, which help Search Engines for Optimization of your WEBSITE/ web-page. You should use <main></main> and <h1></h1> HTML elements, only once because the Search Engines and Screen Readers (for physically impaired people) will optimize your WEB-PAGE. A simple illustration of box elements are shown as below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>R.I.B.H.U. Academy</title>
    <!-- You can see below that more attributes can be added. -->
    <link rel="stylesheet" media="screen" type="text/css" href="./css/mystyle.css" />
    <style>
        /* === EMBEDDED CSS STYLES === */
        h2 { color: green; }
    </style>
  </head>
<body>
Contents (texts, images, videos, audio, graphics / vectors, etc.) inside BODY element shall be visible in the web-browser, with or without any of following boxes, unless placed inside HTML comment tags. <h2> </h2> is an HTML element, explained below. It is not a box / container type element, in which another block-level HTML elements can be placed.
<div>
<header>
<section>
<h1>Top Heading: Branding</h1>
</section>
<nav>
<ul><li>Menu 1</li><li>Menu 2</li><li>Menu 3</li></ul>
</nav>
</header>
<main>
<article>
<section>
<h2>Heading 1</h2><p>Paragraph ...</p>
</section>
</article>
</main>
<article>
<section>
<h2>Heading 2</h2><p>Paragraph ...</p>
</section>
<section>
<h2>Heading 3</h2><p>Paragraph ...</p>
</section>
</article>
<aside>
<section>
<h3>Sidebar</h3>
</section>
</aside>
<footer>
<section>
<h3>Foot Notes</h3>
</section>
</footer>
</div>
These boxes can be nested inside one another, and can be complex. With the help of CSS and JavaScript codes, you can overlap, move, rotate, scale these boxes on one another.
    <script type="text/javascript">
        // javascript codes ...
    </script>
</body>
</html>

HTML Heading Elements

    There are six types of HTML Heading elements, which are block-level elements, and can only be used inside high-level (box or container type) HTML elements, as shown in above illustration.

<h1>R.I.B.H.U. Academy</h1>

<h2>R.I.B.H.U. Academy</h2>

<h3>R.I.B.H.U. Academy</h3>

<h4>R.I.B.H.U. Academy</h4>

<h5>R.I.B.H.U. Academy</h5>
<h6>R.I.B.H.U. Academy</h6>

Other Block Level Elements are:

<p> </p> PARAGRAPH TAGs: These are oftenly used to write some text inside <body> </body> element. <p> </p> element can only be nested inside box-type ELEMENTs, as explained above.

<pre> </pre> Pre-formatted TAGs: This element has been used in old-days when there was no mobile phones. Now, as you see <pre> </pre> ELEMENT used in this WEB-PAGE, Bootstrap framework creates a horizontal scroll-bar, and in general, you will see very long line. <pre> </pre> element can only be nested inside box-type ELEMENTs, as explained above.
<div> </div> DIV TAGs: These are oftenly used as container(s) inside <body> </body> element, to enclose many elements, even <div> </div> tags. These elements can only be nested inside box-type ELEMENTs, as explained above.

Leave a Comment:

Place Your Image Here Size 90x120

Amit Sinha March 2nd, 2023 at 9:30 PM

😃 😄 😁 😆 😅 😂 😉 😊 😇 😍 😘 😚 😋 😜 😝 😶 😏 😒 😌 😔 😪 😷 😵 😎 😲 😳 😨 😰 😥 😢 😭 😱 😖 😣 😞 😓 😩 😫 😤

Place Your Profile Image Here

Ribhu March 3rd, 2023 at 9:30 PM

🐵 🐒 🐶 🐩 🐺 🐱 🐯 🐅 🐆 🐴 🐎 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐 🐪 🐫 🐘 🐭 🐁 🐀 🐹 🐰 🐇

Profile Image

Abhya March 4th, 2023 at 9:30 PM

🍈 🍉 🍊 🍋 🍌 🍍 🍎 🍏 🍐 🍑 🍒 🍓 🍅 🍆 🌽 🌰 🍞 🍖 🍗 🍔 🍟 🍕 🍳 🍲 🍱 🍘 🍙 🍚 🍛