HTML Block & Inline Elements 🎯

Welcome to the HTML Block & Inline Elements tutorial! In this lesson, we'll explore the building blocks of HTML - blocks and inline elements. 🚀

What are HTML Elements? 📝

HTML elements are the basic building blocks of web pages. Each element represents a piece of a web page, such as a heading, paragraph, image, or link.

Block Elements 💡

Block elements are used to create sections and layout on a web page. These elements start on a new line and take up the full width available unless specified otherwise. Here are some common block elements:

<h1> - Heading 1 (largest heading)
<h2> - Heading 2
<h3> - Heading 3
<h4> - Heading 4
<h5> - Heading 5
<h6> - Heading 6 (smallest heading)
<p> - Paragraph
<div> - Division (used for grouping content)
<ul> - Unordered list (list without numbers)
<ol> - Ordered list (list with numbers)
<li> - List item
<a> - Anchor (link)
<form> - Form (for user input)
<button> - Button

Inline Elements 💡

Inline elements are used to add content within other block elements without starting on a new line. Here are some common inline elements:

<span> - Used for grouping inline content
<strong> - Bold text
<em> - Emphasized text
<img> - Image
<a> - Link (can also be used as a block element)
<input> - Form input

Example HTML Document 📝

Let's see a simple example of HTML document using some of the elements we've learned:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Block & Inline Elements Example</title>
</head>
<body>
    <h1>Welcome to CodeYourCraft! 🎉</h1>
    <p>In this tutorial, we'll learn about HTML Block & Inline Elements.</p>

    <h2>Block Elements</h2>
    <ul>
        <li><strong>h1</strong> - Heading 1</li>
        <li><strong>h2</strong> - Heading 2</li>
        <li><strong>p</strong> - Paragraph</li>
        <li><strong>div</strong> - Division</li>
    </ul>

    <h2>Inline Elements</h2>
    <p>Here are some common inline elements:</p>
    <p><strong>span</strong> - Used for grouping inline content</p>
    <p><em>em</em> - Emphasized text</p>
    <p><img src="image.jpg" alt="Image example" width="200" height="100"></p>
    <p><a href="https://www.codeyourcraft.com">Visit CodeYourCraft.com</a></p>
</body>
</html>

HTML Block & Inline Elements 🎯

HTML Block & Inline Elements 🎯

What are HTML Elements? 📝

Block Elements 💡

Inline Elements 💡

Example HTML Document 📝

Quiz 🎯