HTML Element
An HTML tag is defined by the start tag, attributes, content, and closing tag. Therefore an HTML element is everything from the start tag to the close tag.
Example Of HTML Element:
General Syntax
<h2>My First HTML Heading</h2>
<p>My first HTML paragraph.</p> Source Code
Download<h3>This is the block level HTML Heading Element</h3>
<p>This is also the block level element.</p>Source Code : Output
This is the block level HTML Heading Element
This is also the block level element.
Code Explanation
Code Explanation
HTML element has either block-level or inline-level. Block-level HTML element takes full available width and starts with a new line and leaves the top and bottom margin while as inline element takes only as much space as it needs. But, both types of elements can be interchanged by CSS rule means a block-level element can be changed to an inline element and an inline element can be changed to block-level by CSS display property.
Nested HTML Elements
HTML elements can be nested means more than HTML elements can be put inside a single HTML element.
Let us understand nested HTML elements:
General Syntax
<p>Here is some <b>bold</b> text.</p>
<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p> Source Code
Download<p>Learn <b>HTML</b> step by step.</p>
<p>Learn <em>php</em> server side language.</p>
<p>Learn software <mark>development</mark> .</p>Source Code : Output
Learn HTML step by step.
Learn php server side language.
Learn software development .
Code Explanation
Attention!!Here,HTML element <b>,<em> as well as <mark> exists with in <p> element.
HTML Comment
The HTML comment is very useful for understanding the source code. It provides help to understand the source code by another developer. Please keep in mind that HTML comment does not display by browser.
General syntax for writing HTML comment:
HTML comment can be written inside
Example
General Syntax
<!-- <p>This is paragraph element that is commented.</p>--> Source Code
Download<!-- <p>This is paragraph element that is commented.</p>-->Source Code : Output
Code Explanation
Note:-Please keep in mind that ,HTML element is commented
by following syntax <!-- HTML Code Inside --->.
HTML Multi Line Comment
General Syntax
<!--
<p>Learn Object Oriented Javascript</p>
<p>Learn Object Oriented PHP</p>
<p>Learn Web Development Using oop.</p>
-->
<p>
The above statement is a multi-line commented statement that does not display by the browser.
</p> Source Code
Download<!--
<p>Here is some <b>bold</b> text.</p>
<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p>
-->
<p>
The above statement is a multi-line commented statement that does not display by the browser.
</p>Source Code : Output
The above statement is a multi-line commented statement that does not display by the browser.
Code Explanation
Note-Write multi line HTML code comment can be done by <!-- your multi line html code --> statement.
HTML Element Type
The HTML element has either block-level or inline-level. Block-level HTML element takes full available width and starts with a new line and leaves the top and bottom margin while as inline element takes only as much space as it needs. But, both types of elements can be interchanged by CSS rule means a block-level element can be changed to an inline element and an inline element can be changed to block-level by CSS display property.
Block Level Element
Followings are the list of block-level element:
Statement
<div>,<code>,<div>, <p>, <h1> to <h6>, <ul>, <li>,<form>,<ol> ,</ol> and so on.
General Syntax
<p>
Learn HTML Element Types:This is an example of HTML block Level element.
</p> Source Code
Download<p>
HTML paragraph element is a block level element & it takes full available width.
</p>Source Code : Output
HTML paragraph element is a block level element & it takes full available width.
Code Explanation
Note:HTML block-level element takes full available width while inline takes as necessary as required.
HTML Inline Element
Followings are the list of inline element :
Example
<img>, <b>,<em>, <i>,<a>, <span>, <strong>, ,<input>,<button> , etc.
General Syntax
<span>User name:</span>
<input type="text" name="username" id="username" /> Source Code
Download<span>Useame:</span>
<input type="text" name="username" id="username" />Source Code : Output
Useame:
Code Explanation
The Inline element does not take full available and it also does not start with a new line.
Empty HTML Elements
HTML empty element does not have content and it is used without closing tag. Followings are the example of empty HTML elements.
Example
<img>, <input>, <link>, <meta>, <hr>,<br>,etc.
Please keep in mind that, according to above mention the concept, you could not write like this.
<hr> some content </hr> or <br> some content </br>.
General Syntax
<img src="https://picsum.photos/200/300" alt="image" /> <br>
<input type="text" name="username" /> Source Code
Download<img src="https://picsum.photos/200/300" alt="image"> <br><br>
<input type="text" name="username" id="username">Source Code : Output
Code Explanation
HTML Case Sensitive
HTML tags are not case sensitive: <B> means the same as <b>.
×
![Modal Image]()