HTML Elements

HTML (Hypertext Markup Language) is the foundation of web development and is used to structure and format content on the web. HTML documents consist of elements that are specified using tags. HTML elements can be categorized into paired elements and empty elements.

I mentioned tags and elements. What's the difference?

Elements have a starting tag and a closing tag. In this example, we use the p starting and closing tags to create a p element: 

<p>A paragraph of text</p>

So, an element constitutes the whole package:

  • Starting tag
  • Text content (and possibly other elements)
  • Closing tag

If an element has doesn't have a closing tag, it is only written with the starting tag, and it cannot contain any text content.

That said, I might use the tag or element term in the book meaning the same thing, except if I explicitly mention starting tag or ending tag.

Understanding the Fundamentals of HTML.

Paired elements are made up of an opening tag (<tag>) and a closing tag (</tag>) with content in between. For example, the <h1> tag is a paired element used for defining the heading of a webpage.

Empty elements, on the other hand, do not have a closing tag. In XHTML, empty elements are "closed" in the opening tag like this: <br />. Examples of empty elements in HTML include <img />, <input />, and <link />.

Example of an empty elements 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Simple example</h1>
        <p>The first paragraph</p>
        <p>The second paragraph,where <br /> line break is inserted</p>
      </body>
  </html>

In the above-mentioned example we also used an empty <br> tag to insert a line-break.

Types of HTML Elements.

HTML elements can also be categorized asBlock or Inline elements, which determine how the elements are displayed on the webpage and how they interact with other elements.

Block-level Elements

Block-level elements are used to structure the main content of a webpage and always start on a new line, taking up the full width of the page.

They can span across multiple lines and have a line break before and after the element. Examples of block-level elements include <p>, <h1>, to <h6>, <div>, and <footer>. Block-level elements can also contain other block-level and inline elements.

Example of the HTML block-level elements: 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <footer>
            <p>Author: Coding Koleji</p>
            <p><a href="mailto:info@codingkoleji.com">Send message to the Author</a></p>
        </footer>
      </body>
  </html>

Inline Elements

Inline elements, on the other hand, do not cause a line break and only take up the space bounded by their opening and closing tags.

They are used to distinguish part of a text and are typically used within other HTML elements. Examples of inline elements include <a>,<strong>,<em>,<span>, and <img>.

Nested HTML Elements

HTML elements can also be nested, meaning that one element can be placed inside another element.

For example, the <strong> tag can be nested inside a <p> tag to give a text a strong emphasis and display it as bold. It's important to properly close the nested elements in the correct order to ensure proper rendering of the webpage.

Example of the HTML nested elements: 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>The first paragraph</p>
        <p>The second paragraph,where<strong> has a strong displayed as bold</strong></p>
      </body>
  </html>

The Importance of Closing Tags

While closing tags are considered optional for some HTML elements, it's best practice to include them to avoid unexpected errors.

In some cases, HTML elements may still display correctly even without closing tags, but relying on this behavior is not recommended. It's always best to close HTML elements properly with their corresponding closing tags.

Example where the HTML end tag is absent: 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>HTML end tags</h1>
        <p>We forgot to put the end tag.
      </body>
  </html>

Understanding HTML elements and their proper usage is fundamental to web development.

Paired elements and empty elements, block-level and inline elements, and nested elements are important concepts to grasp in order to create well-structured and properly formatted HTML documents.

Proper usage of closing tags is also crucial to ensure consistent rendering across different web browsers.

Empty HTML Elements

The HTML elements that don’t have any content are called empty elements. The <br> , which defines a line break, is an empty element that doesn’t have a closing tag.

Example of the HTML <br> tag: 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>HTML (br) tag</h1>
        <p>The first paragraph</p>
        <p>This tag defined <br /> a line break</p>
      </body>
  </html>

After learnt HTML Elements now you need to know the HTML basic. in the next chapter.

❮ Prev Next ❯