CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

17 October, 2020

HTML Elements

 Programing Coderfunda     October 17, 2020     HTML, HTML5     No comments   

HTML Elements

An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them.


Note: Some elements does not have end tag and content, these elements are termed as empty elements or self-closing element or void elements.

Such as:


<p> Hello world!!! </p>   

Example

<!DOCTYPE html>  

<html>  

<head>  

    <title>WebPage</title>  

</head>  

<body>  

   <h1>This is my first web page</h1>  

    <h2> How it looks?</h2>  

     <p>It looks Nice!!!!!</p>  

</body>  

</html>  



Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not have content and end tag such elements are known as Void elements or empty elements. These elements are also called as unpaired tag.



Some Void elements are <br> (represents a line break) , <hr>(represents a horizontal line), etc.


Nested HTML Elements: HTML can be nested, which means an element can contain another element.


Block-level and Inline HTML elements

For the default display and styling purpose in HTML, all the elements are divided into two categories:


Block-level element

Inline element

Block-level element:

These are the elements, which structure main part of web page, by dividing a page into coherent blocks.

A block-level element always start with new line and takes the full width of web page, from left to right.

These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML.


<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.


Note: All these elements are described in later chapters.

Example:

<!DOCTYPE html>  

<html>  

             <head>  

    </head>  

<body>  

    <div style="background-color: lightblue">This is first div</div>  

    <div style="background-color: lightgreen">This is second div</div>  

    <p style="background-color: pink">This is a block level element</p>  

</body>  

</html>  

Test it Now

Output:


Block-level and Inline HTML elements

In the above example we have used


tag, which defines a section in a web page, and takes full width of page.

We have used style attribute which is used to styling the HTML content, and the background color are showing that it's a block level element.


Inline elements:

Inline elements are those elements, which differentiate the part of a given text and provide it a particular function.

These elements does not start with new line and take width as per requirement.

The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.


Example:

<!DOCTYPE html>  

<html>  

    <head>  

    </head>  

<body>  

    <a href="https://www.javatpoint.com/html-tutorial">Click on link</a>  

    <span style="background-color: lightblue">this is inline element</span>  

    <p>This will take width of text only</p>  

 </body>  

</html>   

Test it Now

Output:


Block-level and Inline HTML elements

Following is the list of the some main elements used in HTML:


Start tag Content End tag Description

<h1> ...... <h6> These are headings of HTML </h1>??..</h6> These elements are used to provide the headings of page.

<p> This is the paragraph </p> This element is used to display a content in form of paragraph.

<div> This is div section </div> This element is used to provide a section in web page.

<br> This element is used to provide a line break. ( void element)

<hr> This element is used to provide a horizontal line. (void element)

  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • HTML AttributesAttributes provide additional information about HTML elements.HTML AttributesAll HTML elements can have attributesAttributes provide additio… Read More
  • HTML StylesExampleI am RedI am BlueI am BigThe HTML Style AttributeSetting the style of an HTML element, can be done with the style attribute.The HTML&… Read More
  • HTML HeadingsHeading 1Heading 2Heading 3Heading 4Heading 5Heading 6HTML HeadingsHeadings are defined with the <h1> to <h6> tags.<… Read More
  • HTML Text FormattingHTML Text Formatting❮ PreviousNext ❯Text FormattingThis text is boldThis text is italicThis is subscript and superscriptTry it You… Read More
  • HTML ParagraphsHTML ParagraphsThe HTML <p> element defines a paragraph:Example<p>This is a paragraph.</p><p>This is another pa… Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Sitaare Zameen Par Full Movie Review
     Here’s a  complete Vue.js tutorial for beginners to master level , structured in a progressive and simple way. It covers all essential topi...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • C++ in Hindi Introduction
    C ++ का परिचय C ++ एक ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग लैंग्वेज है। C ++ को Bjarne Stroustrup द्वारा विकसित किया गया था। C ++ में आने से पह...
  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • iOS 17 Force Screen Rotation not working on iPAD only
    I have followed all the links on Google and StackOverFlow, unfortunately, I could not find any reliable solution Specifically for iPad devic...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

  • Sitaare Zameen Par Full Movie Review - 7/7/2025
  • Step-by-step Vue.js Tutorial Beginner to Master - 7/7/2025
  • Tailwindcss best practices for responsive design - 7/1/2025
  • Tailwind CSS Tutorial (Beginner to Master) - 7/1/2025
  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024

Laravel News

  • PHP Fatal Error Backtraces in PHP 8.5 - 7/11/2025
  • Laravel's Rule::contains() for Fluent Array Validation - 7/6/2025
  • NativePHP for Mobile v1.1: Smaller, Smarter, and Ready to Scale - 7/9/2025
  • PHP 8.5 Introduces an INI Diff Option - 7/10/2025
  • Custom Object Casting in Laravel Models - 7/6/2025

Copyright © 2025 CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda