HTML Inline And Block Element Or Semantic Elements
Day 4 : 60 Days Of Full Stack Web Development Challenge
Display Values :
Every HTML element has a default display value, depending on what type of element it is.The two most common display values are block and inline.
Block- Elements
Inline - Elements
Block- Elements:
A block-level element always starts on a new line
The browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available.
Example:
<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>
</body>
</html>
Output:
Inline-Elements:
An inline element does not start on a new line.
An inline element only takes up as much width as necessary
Example:
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span
<span style="border: 1px solid black">Hello World</span>
element inside a paragraph.</p>
</body>
</html>
Output:
Others Block And Inline Elements:
The <div> Element:
The
<div>element is often used as a container for other HTML elements.The
<div>element has no required attributes, butstyle,classandidare common.When used together with CSS, the
<div>element can be used to style blocks of content:
Exapmle:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:green;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>
Output:
The <span> Element :
The
<span>element is an inline container used to mark up a part of a text, or a part of a document.The
<span>element has no required attributes, butstyle,classandidare common.When used together with CSS, the
<span>element can be used to style parts of the text
Example:
<!DOCTYPE html>
<html>
<body>
<p>My Name Is <span style="color:blue;font-weight:bold;">Aditya</span>
Thank You !!!</p>
</body>
</html>
Output:
Hr Tag :
HTML <hr> tag is used to specify a paragraph-level thematic break in document.
It is used when you abruptly change your topic in your HTML document.
It draw a horizontal line between them. It is also called a Horizontal Rule in HTML.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML</h2>
<p>HTML is a language for describing web pages.</p>
<hr/>
<h2>HR Tag </h2>
<p> HR tag is used to draw a horizontal line within the texts to sepate content.<p>
</body>
</html>
Output:
HTML Subscript and Superscript Tags:
Subscript :
The <sub> tag is used to add a subscript text to the HTML document.
The <sub> tag defines the subscript text.
Subscript text appears half a character below the normal line and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O to be written as H2O.
Example:
<p>
Almost every developer's favorite molecule is
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>
also known as
"caffeine."
</p>
Output:
Superscript:
The <sup> tag is used to add a superscript text to the HTML document.
The <sup> tag defines the superscript text.
Superscript text appears half a character above the normal line and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes.
Example:
<p>The <em>Pythagorean theorem</em>
is often expressed as the following equation:
</p>
<p>
a<sup>2</sup>+ b<sup>2</sup> = c<sup>2</sup>
</p>
Output :
HTML Semantic Elements :
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements:
<div>and<span>- Tells nothing about its content.Examples of semantic elements:
<form>,<table>, and<article>- Clearly defines its content.
Semantic Elements in HTML :
In HTML there are some semantic elements that can be used to define different parts of a web page:
Tag And Uses:
1. Header
Represents a group of introductory or navigational aids
The element specifies a header for a document or section
The element should be used as a container for introductory content
The HTML element represents introductory content, typically a group of introductory or navigational aids
It may contain some heading elements but also a logo, a search form, an author name, and other elements
You may have several elements in one document
2. NAV
Represents a section of the document intended for navigation
The element defines a set of navigation links
The HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents
Common examples of navigation sections are menus, tables of contents, and indexes
3. Section
Represents a generic document or application section
The element defines a section in a document
The HTML element represents a standalone section
According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading"
A web page could normally be split into sections for introduction, content, the middle section with left and right sections, etc.
4. Article
Represents an independent piece of content of a document, such as a blog entry or newspaper article
The element specifies independent, self-contained content
The HTML element represents a self-contained composition in a document
The HTML tag is used in a blog/forum post, newspaper article, blog entry etc.
5. Aside
Represents a piece of content that is only slightly related to the rest of the page
The element defines some content aside from the content it is placed in (like a sidebar)
Asides are frequently presented as sidebars or call-out boxes
6. Footer
Represents a footer for a section
The element specifies a footer for a document or section
The HTML element represents a footer for its nearest sectioning content or sectioning root element
A footer typically contains information about the author of the section, copyright data or links to related documents
You may have several elements in one document
Conclusion:
Hence We Studied HTML Inline And Block Element Or Semantic Elements With Example.
What's next?
Tomorrow I will introduce HTML Table And Form Or Form Element Or Tag.