Basic Elements in HTML

HTML elements are the building blocks of HTML pages. These elements are represented by tags. HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on.

Basic Elements

Here are some of the basic elements in HTML:

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important heading.

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

Paragraphs

Paragraphs are defined with the <p> tag. Usually this tag is used to define a paragraph of text.

This is a paragraph.

This is another paragraph.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Links (Anchor Tags)

Links are defined with the <a> tag. The href attribute specifies the URL of the page the link goes to.

This is a to YouTube

<a href="https://youtube.com">This is a to YouTube</a>

There are other types of links that you can use under the <a> tag.

Types of Links

Internal Links: Links to pages within the same website.

HTML Introduction

<a href="/web/html/introduction/">HTML Introduction</a>

External Links: Links to pages outside the website.

YouTube

<a href="https://youtube.com">YouTube</a>

Email Links: Links that open the user’s email program.

Send an email

<a href="mailto:sadgp@example.com">Send an email</a>

Telephone Links: Links that open the user’s phone dialer.

Call us

<a href="tel:+1234567890">Call us</a>

Element Links: Links that point to a specific element on the same page.

Go to the Headings Section

<a href="#headings">Go to the Headings Section</a>

Keep in mind that it only works if there is an element with the id attribute set to headings.

Target Attribute

You can also use the target attribute to specify where to open the linked document. There are several values but the most common are:

_self: Opens the linked document in the same window/tab.

YouTube

<a href="https://youtube.com" target="_self">YouTube</a>

_blank: Opens the linked document in a new window/tab.

YouTube in a new tab

<a href="https://youtube.com" target="_blank">YouTube in a new tab</a>

Best Practices for Links

The content inside a link should indicate where the link goes, even out of context.

Example, instead of:

You can watch a video here.

<p>You can watch a video <a href="https://youtube.com">here</a>.</p>

You should write:

You can watch a video on YouTube.

<p>You can watch a video on <a href="https://youtube.com">YouTube</a>.</p>

Images

Images are defined with the <img> tag. The src attribute specifies the URL of the image.

<img src="https://placehold.co/600x400" alt="Placeholder Image">

The alt attribute provides an alternate text for an image, if the image cannot be displayed. For example:

<img src="https://placehold.co/not-valid-url" alt="Placeholder Image">

You can also specify the width and height of the image using the width and height attributes. This is useful to reserve space for the image before it loads.

<img src="https://placehold.co/600x400" alt="Placeholder Image" width="600" height="400">

The width and height attributes should be set to the actual width and height of the image in pixels.

The title of the image can be set using the title attribute. This is useful for providing additional information about the image when the user hovers over it.

<!-- Hover over the image to see the title -->
<img src="https://placehold.co/600x400" alt="Placeholder Image" title="This is a placeholder image">

Lists

Lists are defined with the <ul> (unordered list) and <ol> (ordered list) tags. List items are defined with the <li> tag.

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

Item 1
Item 2
Item 3

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Item 1
Item 2
Item 3

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Tables

Tables are defined with the <table> tag. A table row is defined with the <tr> tag. A table header is defined with the <th> tag. A table data/cell is defined with the <td> tag.

Header 1	Header 2
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Forms

Forms are defined with the <form> tag. The action attribute specifies where to send the form data. The method attribute specifies the HTTP method to use when sending the form data.

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

The label tag is used to associate a label with a form element. The for attribute of the label tag should match the id attribute of the form element.

The input tag is used to create form controls. The type attribute specifies the type of form control to create. The id attribute specifies a unique id for the form control. The name attribute specifies the name of the form control.

The submit input type creates a submit button that sends the form data to the server.

Comments

Comments are defined with the  tags. Comments are not displayed in the browser, but they can be useful for documenting your code.

This is a paragraph.

<!-- This is a comment -->
<p>This is a paragraph.</p>