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.
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:
<h2>My First HTML Heading</h2>
<p>My first HTML paragraph.</p>
<h3>This is the block level HTML Heading Element</h3>
<p>This is also the block level element.</p>
This is also the block level element.
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.
HTML elements can be nested means more than HTML elements can be put inside a single HTML element.
Let us understand nested HTML elements:
<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>Learn <b>HTML</b> step by step.</p>
<p>Learn <em>php</em> server side language.</p>
<p>Learn software <mark>development</mark> .</p>
Learn HTML step by step.
Learn php server side language.
Learn software development .
Attention!!Here,HTML element <b>
,<em>
as well as <mark>
exists with in <p>
element.
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
<!-- <p>This is paragraph element that is commented.</p>-->
<!-- <p>This is paragraph element that is commented.</p>-->
Note:-Please keep in mind that ,HTML element is commented
by following syntax <!-- HTML Code Inside --->
.
<!--
<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>
<!--
<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>
The above statement is a multi-line commented statement that does not display by the browser.
Note-Write multi line HTML code comment can be done by <!-- your multi line html code -->
statement.
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.
Followings are the list of block-level element:
<div>,<code>,<div>, <p>, <h1> to <h6>, <ul>, <li>,<form>,<ol> ,</ol> and so on.
<p>
Learn HTML Element Types:This is an example of HTML block Level element.
</p>
<p>
HTML paragraph element is a block level element & it takes full available width.
</p>
HTML paragraph element is a block level element & it takes full available width.
Note:HTML block-level element takes full available width while inline takes as necessary as required.
Followings are the list of inline element :
<img>, <b>,<em>, <i>,<a>, <span>, <strong>, ,<input>,<button> , etc.
<span>User name:</span>
<input type="text" name="username" id="username" />
<span>Useame:</span>
<input type="text" name="username" id="username" />
The Inline element does not take full available and it also does not start with a new line.
HTML empty element does not have content and it is used without closing tag. Followings are the example of empty HTML elements.
<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>
.
<img src="https://picsum.photos/200/300" alt="image" /> <br>
<input type="text" name="username" />
<img src="https://picsum.photos/200/300" alt="image"> <br><br>
<input type="text" name="username" id="username">
HTML tags are not case sensitive: <B>
means the same as <b>
.