HTML ELEMENT: DISPLAY
Display
Every HTML element has an inbuilt default settings of display value, we can see element on their default display pattern they have with themselves as relative to visual change. These elements are also divided for better understanding.
Block Elements
Block elements are elements that start in thier own line, and takes up the full width available on the screen of any device. They as if they have a line break before and after them, this makes anything that comes after them look like it has its own line. Examples of Blocks elements are as follows;
<nav><table><fieldset><aside><address><div><footer><form><article><video><blockqoutes><nav><ul><canvas><dt><figcaption><ol><p><pre><hr><li><dd><h1-h6><section><dd><figure><dl> <noscript>Inline Elements
Unlike block elements, inline elements don't start on their own new line or take up much width space and they relate inline with each other. Examples of Inline elements are as follows;
<span><br><a><sup><time><em><im><audio><big><small><acronym><abbr><ul><b><cite><dfn><i><sub><code><input><bdo><strong><button><map><textarea><label><object><q<var><kbd><tt><samp<>select>Grouping HTML Elements
There are two important tags which we use very frequently to group various other HTML tags the first is the <div> tag and the <span> tag.
The <div> tag
This tag plays a very important role in the grouping many different HTML tags and applying CSS on group of elements. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS Learn more about Cascading Style Sheet. but it is used in the example below to explain the <div> tag. A simple example of </div> tag.
<!DOCTYPE html>
<html>
<head >
<title>HTML div Tag </title>
</head>
<body>
< ! - - g r o u p o f t a g s - - >
<div style = "color:red">
<h4>This is first group</h4>
<p>types of soda</p>
<ul>
<li>soda1</li>
<li>soda2</li>
<li>sodaa</li>
</ul>
</div>
< ! - - g r o u p o f t a g s - - >
<div style = "color:blue">
<h4>group of colors</h4>
<p>types of colors</p>
<ul>
<li>primary</li>
<li>secondary</li>
<li>others</li>
</ul>
</div>
</body>
</html>
The <span> Tag
The HTML <span> is used to group inline-elements in an HTML document making it also an inline element. Like the <div> tag,this tag does not give any visual change on the block element but has more meaning when it is used with CSS. The major difference between the <span>tag and the <div> tag is that the <span> tag is used with inline elements while the <div> tag is used with block-level elements.Learn more about Cascading Style Sheet. but for the purpose of this example it will be used below to explain the <span> tag. A simple example of <span> tag.
<!DOCTYPE html>
<html>
<head >
<title>HTML span Tag </title>
</head>
<body>
<p >This is <span style = "color:red" >red </span > and this is
<span style = "color:orangered" >orangered </span > </p >
</body>
</html>
