Tuesday, July 13, 2021

HTML ELEMENTS: html elements - HTML Tutorial

July 13, 2021    No comments

 

HTML ELEMENT: 

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 and element is a collection of start tag, attributes, end tag, content between them.

Such as:  <p>Hello </p>


Example:

<!DOCTYPE html>

<html>

<head>

<title>My webpage</title>

</head>

<body>

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

<h2>How it works?</h2>

<p>It looks nice!!!!!</p>

</body>

</html>


All the content written between body elements are visible on webpage.

Void element: All the elements in HTML do not require of have start tag and end tag, some elements does not have content and end tag such element s are known a Void elements or empty elements. These elements are also called as unpaired tag. Some Void elements are <br> represent a line break. <hr> represents a horizontal line etc.

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

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

  1. Block-level element
  2. Inline element

1-BLOCK-LEVEL ELEMENT:

  1. These are the elements which structure main part of web page by dividing a page into coherent blocks.
  2. A block-level element always start with new line and takes the full width of web page from left to right.
  3. 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>.

Example:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div> style="background-color: lightblue">This is first dev</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>

Output:

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.

2-INLINE ELEENTS:

Inline elements are those element which differentiate the part of a give 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> and <var>.

Example:

<!DOCTYP html>

<head>

</head>

<body>

<a href="https://www.shaahnawaz.com/html-tutorial">Click Onlink</a>

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

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

</body>

</html>

Output:

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

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

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

<div> This element is used to provide a section in webpage.

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

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

0 comments:

Post a Comment