HTML Elements or Tags

Learn about HTML Elements or HTML Tags

HTML elements are the building blocks of a web page. They are used to define the structure and layout of the page and to create the different types of content that will be displayed.

  1. Block-level Elements: Block-level elements are used to create larger structures on a web page, such as headings, paragraphs, and divs. They take up the full width of the available space, and any following content is displayed below them. Some examples of block-level elements are: <div>, <p>, <h1>, <section>, <article>
  2. Inline Elements: Inline elements are used to create small pieces of content, such as text or images, that are inline with the surrounding text. Some examples of inline elements are: <a>, <span>, <img>, <strong>, <em>

Here is an example of HTML code that shows the use of some elements:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Web Page</h1>
    </header>
    <nav>
        <a href="#about">About</a> |
        <a href="#services">Services</a> |
        <a href="#contact">Contact</a>
    </nav>
    <main>
        <h2>About Us</h2>
        <p>We are a company that provides high-quality services in the field of web development.</p>
        <section>
            <h3>Our Services</h3>
            <ul>
                <li>Web Design</li>
                <li>Web Development</li>
                <li>Search Engine Optimization</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>Copyright ©2022 My Company</p>
    </footer>
</body>
</html>

In this example, the <header> element is used to create the header of the web page. Inside the header, there is an <h1> element that is used to create a large heading. The <nav> element is used to create a navigation menu, with links to different sections of the web page. The <main> element is used to create the main content of the web page, and inside it, there are <section> elements used to create different sections of the content. The <footer> element is used to create the footer of the web page, with the copyright information.

It’s important to note that most of the elements in HTML are semantic, which means they are designed to convey the meaning of the content they contain, rather than just providing a visual styling.

That’s a basic overview of HTML elements. As you continue to learn web development, you’ll discover many more elements and ways to use them to create dynamic and engaging web pages.

Scroll to Top