In this post, we will go through the basics of an HTML element, what HTML elements are and why are they important. Proper understanding of HTML elements is necessary to fully comprehend the structure of HTML document. In addition, it will help you create more efficient and better designed web pages.
What is in fact an HTML element?
An HTML element represents a basic unit, the component of an HTML document. It is the item from which the entire web document is structured.
With these elements, we actually tell the web browser how our website is constructed. In essence, HTML elements are the bricks from which the web page is made.
Unlike CSS, which represents the styling of a page, and defines how our website is going to look, HTML elements are the content, the meaning.
If you wish to read about HTML in detail, above all you should read the post What is HTML? Fully Understand HTML Basics.
To create HTML elements, we use so called “tags”.
What are HTML tags?
HTML tags are part of HTML elements’ syntax. Tags are presented with the angle brackets ( “<” “>” ), and the element’s symbol. There is an opening and closing tag. Closing tag has a “/” before the closing tag symbol. Between the tags, we enter our content.
This is the basic structure of HTML element. Different “tag” symbolizes different HTML element.
What are some basic HTML elements?
Paragraph is among the most used HTML elements. We use <p> tags to create lines of text.
<p>The text content</p>
Heading Elements <h1>,<h2>,…,<h6>
There are several types of heading, and all differ from each other by its size. We have headings from <h1>, up to <h6> heading tag, where <h1> is the heading with the largest font size.
Headings are used to mark important segments of our page, like page or section titles, etc.
Why are Headings important?
If you want a text with larger font size, why not use a <p> and style it in CSS?
Well, it is not all about styling. Headings are used to mark important parts of content, not just for a website user, but also for search engines. Structuring the web page with appropriate headings helps search engines to separate the content.
<h1>More Important Heading</h1> <h4>More Important Heading</h4>
Anchor Element <a>
The <a> tag creates a link to some other web page or to a file. A part of anchor element is an href attribute, which represents the link’s destination.
The text we put between opening and closing anchor tag is a text that becomes a link.
<a href= "www.linkdestination.com">This is a link</a>
List Elements <ol> and <ul>
We have two types of lists: ordered lists <ol> and unordered lists <ul>.
Each of this lists contains list items, which are labeled with <li> tag.
Ordered list <ol>
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
- Item 1
- Item 2
- Item 3
Unordered list <ul>
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
- Item 1
- Item 2
- Item 3
Image Element <img>
We use an <img> element to add images to our web page. These elements do not have a closing tag, but are self-closing elements.
The most important attribute of <img> element is a source (src) attribute. The src attribute specifies the location of an image.
Other attributes we use are alt and title attribute. Title attribute is optional, while alt attribute represents alternate text for an image. The purpose of alt attribute is to describe the image if it is not loaded, or if the user is not able to understand image’s meaning.
<img src="folder/imagefile.jpg" alt="descriptive text" title="optional title for an image">
Div Element <div>
We use a <div> element to group multiple HTML elements into one section. In addition, <div> element can store all other HTML elements, as well as <div> elements.
<div> <h1>Heading Title</h1> <p>Paragraph Text</p> <img src="image.png"> </div>
These are just some basic HTML elements. In addition, HTML5 version introduced new tags, which allowed clearer document structure, such as <section> and <article>. Here you can find full list of html tags.
HTML element is the basic component of HTML document. HTML elements are used to design the web page structure, with each element represented with its own special tag.
Tags, especially new HTML5 tags, allows us to clearly distinguish separate sections of our page. Therefore, knowing and understanding the behavior of different HTML elements, you will be able to create more effective websites.
In addition, HTML5 as the newer HTML standard, possesses many new options that can improve browsing experience. To learn more about the difference between basic HTML and HTML5 version, please read the post Difference between HTML5 and HTML.