HTML Elements || Block Elements and Inline Elements in HTML
Welcome back to CodaSnap! We have already learnt about HTML Basics before. If you haven't, go and check this out first: HTML Basics for Beginners. And now we're going to learn about HTML Elements, Block Elements and Inline Elements in HTML, Basic HTML Tags and Text Formatting in HTML. Understanding about HTML Elements and difference between Block and Inline Elements in HTML. is crucial for effective web development. Inline elements play a significant role in structuring text and creating rich, interactive web content.
HTML Elements
An HTML Element is consisting of a start tag, some content and an end tag. The entire element is everything between the start tag and end tags.
For Example:
<h1>My First Heading</h1>
<p>My First Paragraph.<p>
In this example <h1> and <p> are HTML elements.
Nested Elements
HTML elements can be nested, meaning they can contain other elements. All HTML documents consist of nested elements.
For Instance:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph.<p>
</body>
</html>
Here, <html> contains <body>, which in turn contains <h1> and <p>.
Empty Elements
Some elements have no content and are called empty elements. Empty elements do not have an end tag. Empty elements are also known as self-enclosing tags, as they don't have an end tag.
Example: <br> (line break).
<p>This is a <br> paragraph with a line break.</p>
Block Elements in HTML
- Block Elements always start with a new line.
- Take up the full width available within their container.
- Block Elements are used for structuring main content and layout sections.
- Example: <div>, <p>, <h1> to <h6> and <ul>
Inline Elements in HTML
- Inline Elements in HTML don't start on a new line; they flow within the same line.
- Only take up as much width as necessary.
- Inline Elements in HTML are ideal for applying specific styles or adding interactive elements to content.
- Common Inline Elements in HTML are <span>, <a>, <em>, <strong>.
Case Sensitivity
HTML Elements are not case sensitive. <P> is the same as <p>. However, lower tags are recommended for consistency.
HTML Attributes
HTML Attributes are used to add more information corresponding to a HTML tag.
For Example:
<a href:"https://www.codasnap.blogspot.com">CodaSnap</a>
<a> is anchor tag. and <href> is an Attribute.
HTML Basic Tags
1. Heading Tag (<h1> to <h6>)
Heading Tag is used to mark headings in HTML. We have 6 heading tags from <h1> (Most Important) to <h6> (Least Important).
<h1>Heading 1<h1>
<h1>Heading 2<h1>
<h1>Heading 3<h1>
<h1>Heading 4<h1>
<h1>Heading 5<h1>
<h1>Heading 6<h1>
2. Paragraph Tag (<p>)
Paragraph tags <p> are used to add paragraph to a HTML page.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
3. Anchor Tag (<a>)
Anchor tags <a> are used to add links to an existing content to a HTML page.
<a href:"https://www.codasnap.blogspot.com">CodaSnap</a>
4. Image Tag (<img>)
Image tags <img> are used to add images to a HTML page.
<img src="codasnap.png" alt="codasnap logo" width="100%" height="auto">
5. Line Break Tag (<br>)
The <br> tags are used to create line breaks in HTML page. <br> can also be used as <br />. <br> is a self-enclosing tag.
<p>
This is
<br>
Usage
<br>
<br>
of
<br>
<br>
<br>
br tag
</p>
6. Horizontal Ruler Tag (<hr>)
The <hr> tag in HTML is used to create a horizontal ruler. It is often used to separate the content.
<h1>This is section 1</h1>
<hr>
<h1>This is section 2</h1>
<hr>
<h1>This is section 3</h1>
Text Formatting Tags in HTML
1.Bold Text (<b> and <strong>)
The <b> tag defines bold text without any additional importance.
The <strong> tag emphasizes text and typically displayed in bold.
This is a <b>BOLD</b> text.
And This is a <strong>STRONG</strong> text.
2. Italic Text (<i> and <em>)
The <i> tag defines text in alternate voice or mood (italic).
The <em> tag emphasizes text and typically displayed in italic.
<i>This text is written in Italic</i>
And This is an <em>Emphasized Text.</em>
3. Bigger and Smaller Text(<big> and <small>)
The <big> tag makes text bigger.
The <small> tag makes text smaller.
<big>This is a big text.</big>
And <small>This is a small text.</small>
4. Marked Text (<mark>)
The <mark> tag highlights text.
<mark>This is highlited text.</mark>
5. Deleted and Inserted Text (<del> and <ins>)
<del> represents deleted text (usually with a strikethrough).
<ins> represents inserted text (usually underlined)
This is <del>deleted</del> text.
And This is <ins>underlined</ins> text.
6. Subscript and Superscript (<sub> and <sup>)
<sub> defines subscript text (half a character below the normal line).
<sup> defines superscript text (half a character above the normal line).
Water Molecular Formula is H<sub>2</sub>O
2<sup>2</sup> = 4
Next Steps
Practice these tags and elements by using them in your own webpage. And explore more about these tags and learn how to format your text to make your webpage more beautiful. Learn more about block and inline elements in html and the differences between block elements and inline elements in html. Check out MDN Web Docks to learn more about them.
Conclusion
In this guide we learnt about basic tags, text formatting tags, elements, block elements and inline elements in HTML. Understanding tags, block and inline elements in HTML is fundamental for creating well-structured and interactive web pages. These elements allow you to format and organize your text effectively, enhancing both the user experience and the visual appeal of your website. If you want to make your website more professional, CSS can help us make our website more beautiful and creative. You can learn more about CSS here.
We hope this guide about basic tags, text formatting tags, block elements, inline elements in HTML has been helpful. Stay tuned for more tutorials and tips on HTML and web development. Till then keep learning. Keep coding.
