Skip to content
Azril Hakim
LinkedInGitHub

Elements & Tags

HTML (Hypertext Markup Language) is a markup language used to structure content on the web. In HTML, elements are used to define different parts of a web page. Elements are enclosed within tags, which consist of an opening tag and a closing tag. Let’s explore some of the most common HTML elements and tags:

Heading Tags

HTML provides six heading tags, from <h1> to <h6>, which are used to define headings of different levels. <h1> represents the highest level of heading, while <h6> represents the lowest.

Example:

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<!-- ... -->
<h6>This is a Heading 6</h6>

Paragraphs

The <p> tag is used to define paragraphs of text.

Example:

<p>This is a paragraph of text.</p>

To create hyperlinks, you can use the <a> (anchor) tag. It requires the href attribute to specify the URL of the destination.

Example:

<a href="https://www.example.com">Visit Example.com</a>

Images

To display images on a web page, use the <img> tag. It requires the src attribute to specify the image source.

Example:

<img src="image.jpg" alt="Description of the image">

Lists

HTML supports both ordered (numbered) and unordered (bulleted) lists. Use <ul> for unordered lists and <ol> for ordered lists, with <li> for list items.

Unordered List Example:

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

Ordered List Example

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Divisions and Spans

The <div> and <span> tags are used for grouping and styling content. <div> is a block-level element, while <span> is an inline element.

Example:

<div style="background-color: lightgray;">This is a div element.</div>
<span style="color: blue;">This is a span element.</span>

Attributes and Values

HTML elements can have attributes, which provide additional information about an element. Attributes are defined within the opening tag and consist of a name and a value, separated by an equals sign.

For example, the src attribute in the <img> element specifies the source file for the image:

<img src="image.jpg" alt="Description of the image">
  • src is the attribute name.
  • "image.jpg" is the attribute value. Attributes can be used to control an element’s behavior, appearance, and other properties.

In this section, we’ve covered the fundamentals of HTML elements and tags, including some common elements and how attributes and values are used to enhance their functionality. Understanding these basics is crucial for building web pages and applications with HTML.