HTML Elements

What are HTML Elements?
HTML elements are the building blocks of a webpage. An element usually consists of an opening tag, content, and a closing tag. They tell the browser how to display and structure different parts of your webpage.

Examples of HTML Elements

  • <p> ... </p>
     → Defines a paragraph. Paragraphs are used for regular blocks of text. Browsers automatically add spacing before and after a paragraph to make content easy to read.
  • <h1> ... </h1>
     → Defines a heading. <h1> is the largest and most important heading on a page, usually the title or main heading. There are also <h2> to <h6> for subheadings with decreasing importance.
  • <a> ... </a>
     → Defines a hyperlink. Used to link to another page, website, or even a section on the same page. Requires the href attribute.
  • <img>
     → Defines an image. It is a self-closing element that requires src (image path) and alt (alternative text for accessibility).
  • <div> ... </div>
     → Defines a division or container. Often used to group elements together for styling or layout purposes.

Structure of an HTML Element

Most HTML elements follow this structure:

<tagname> Content goes here </tagname>

For example:
– <p>This is a paragraph</p>
– <h1>Welcome to My Website</h1>
– <a href="about.html">Go to About Page</a>

Types of Elements

Block-level Elements
These take up the full width available (start on a new line). Example: <div>, <p>, <h1>. They are mainly used to create the overall structure of the page.

Inline Elements
These only take up as much space as their content. Example: <span>, <a>, <strong>. They are used inside block elements to style or highlight specific parts of text.

Example Code

<h1>This is a Heading</h1>
<p>This is a paragraph with <strong>bold text</strong> and <a href="#">a link</a>.</p>
<img src="example.jpg" alt="Example Image">

Key Points to Remember

  • Most elements have an opening and closing tag.
  • Some elements (like <img> and <br>) are self-closing.
  • Block-level elements create structure, inline elements style content inside blocks.
  • Headings (<h1>–<h6>) give your page hierarchy and improve SEO.
  • Paragraphs (<p>) are the most common way to display readable text.
  • Use semantic elements (<header>, <article>, etc.) for better SEO and accessibility.

Practice Exercise

👉 Create a new file named elements.html. Add a heading (<h1>), a paragraph (<p>) with <strong> and <a>, and an <img>. Open it in your browser to see how elements work together.

Pro Tip 💡

Use Emmet in VS Code to create elements quickly. For example, typing p>lorem10 and pressing Enter will generate a paragraph with 10 random words.