HTML Elements – What They Are, What They Are For, And How You Have To Use Them
In programming, Hypertext Markup Language (HTML) is the first step in making your website come to life.
When you first start learning HTML, one of the first things you’ll notice is that a web page is not just an entity. It has several components that all work together to provide you with the experience of a website.
These components are known as elements. They are the building blocks of your website, and they’re necessary to learn if you want to create and design a website or app.
Whether you’re working with images, text, or videos, It gives you everything you need your website to display.
What Are HTML Elements
An HTML element is a collection of a start tag, its attribute, end tag, and everything in between. It instructs the browser on the patterns to display the images, text, and other content on a web page.
Common Structure of HTML Elements
HTML tags are commands that are represented by certain keywords. They define how a web browser will display and format content. A web browser can differentiate between HTML content and plain text through tags.
Most times, elements have three parts: the opening tag, the content tag, and the closing tag. However, not all HTML elements follow this structure; some HTML tags are not closed.
- Opening Tag < >
They consist of text enclosed by angle brackets (>). An element begins with it and ends with a closing tag.
Examples of open tags:
<p> <h1> <body>
- Attributes
This markup language gives additional instructions on the display of an element. For instance, attributes can change element functionality, size, and color. They are components that follow the opening tag.
Examples of attributes:
<p align="left"> <h1 style=font-family: Calibri;>
- Closing Tag </>
The closing tag marks the end of the element section.
Examples of closing tags:
</p> </h1> </body>
- Content
Contents are text, images, and videos on the HTML page. They are usually between the opening and closing tags.
Example of attributes:
<p> this is content of a paragraph tag</p> <!-- The example above shows how an element is - - >
Illustrations of elements with closing tag:
<h1 style=font-family: Calibri;> This is a content of heading 1 tag</h1> <!--The first example is an element with attributes --> <p> This is a trial text </p> <!--The second example is an element without attributes --> <!--The tag's symbols are not case-sensitive. Therefore you can have <p> or <P> -->
Empty Elements
Elements usually have an opening and closing tag. But, some have no closing tags or content. These refer to empty elements.
Here are common examples of empty elements;
The line break <br> element, which inserts a line break between text, is a common empty element. The <hr> for horizontal line and <img> for images are also common examples.
Illustrations:
<img src=""> <!-- no closing tag = empty element--> </p> This is a trial text. <br>This is text on a separate line. </p> <!-- The main focus in the above example is the <br> element; it is a child element because it is nested in the <p> element. While the <p> element has a closing tag, the <br> does not have a closing tag; hence it is an empty element. -->
Result of <br> :
This is a trial text.
This is a text on a separate line.
HTML Element Nesting
Every HTML document contains nested elements. Element nesting is the process of putting one element inside another. You can accomplish this by inserting the new element between the parent tags.
There would be a separate opening tag, content, and closing tag. The first element is the parent element, while the nested element is a child element.
Child elements can also contain nested elements, making them a parent. In HTML, you can nest elements as many levels deep as you want, as long as each parent element has a closing tag.
Illustration
First illustration
<html>
<head>
<title>I'm a child element of the head tag </title>
</head>
<body></body>
</html>
<!-- In the example above, the <html> element is the parent that is nesting both the head and body elements. The <html> element is the grandparent that is nesting the <title> element. The <head> element is the parent of the of the < title> element - ->
Second illustration
<p>This is a trial text. <a href="https://www.sololearn.com /">This is a link to Sololearn.</a> This is a test. </p>
Result:
This is a trial text. This is a link to Sololearn. This is a test.
Differences Between HTML Elements, Tags, and Attributes
Most beginners confuse HTML elements for tags. The table below shows the differences between them.
| Element | Tags | Attributes | |
| Composition | It starts with the opening tag, then the content, and ends with the closing tag. It can also be an empty element that doesn’t require a closing tag or content. | It starts with < followed by the element’s symbol and ends with >. | They are usually in alphabetic letters. |
| Function | They define the overall content. | They act as keywords, where each tag has a distinct meaning. | They modify a tag and give additional instructions to the element. |
| Structural Function | It is a component of the HTML document. | It is a component that forms an element. | It is composed of an element. |
What Are They For? And How You Can Use Them
You can use HTML elements to add structure, semantics, and formatting to various parts of an HTML document. The function of these elements depends on tags and attributes.
Spaces that HTML elements take up on the viewport depend on the level of the element, and there are two levels: block and in-line level.
Block Level Elements
You can use a block-level element to create a page section. It stretches to fill the end of the viewport and always begins a new line. <p>, <h1> to <h6> (page headings), <table>, <ul> (unordered list), <ol> (ordered list), and <div> are all common block-level elements.
Illustration:
<p>This is a trial text. Below is an ordered list:</p> <ol> <li>item one</li> <li>item two</li> <li>item three</li> </ol>
Results
This is a paragraph. Below is an ordered list:
- Item one
- Item two
- Item three
Inline Level Elements
Inline elements exist alongside their parent element. The content determines their width and height. They also do not start a new line. You can have multiple of them on the same line.
Some inline elements are <a>, <img>, <em> (emphasis; italicized an element), <strong> (bolds an element), <button>, and <span>.
Illustration
<p>This is a trial text with <strong>bolded text</strong> and <em>emphasized text</em> inside it. </p>
Result:
This is a trial text with bolded text and emphasized text inside it.
HTML Tags and Their Uses
Tags specify the element’s uses and functions. There are over 100 HTML tags. In the table below are some common tags and their use.
Meta Tags
Meta tags create and manipulate the HTML metadata. Page metadata contains information about the page. They include information about styles, scripts, and data. It also assists software (search engines, browsers, and so on) in using and rendering the page.
Style and script metadata can be defined on the page or linked to another file that contains the information. Below are some meta tags and their functions
| Tags | Description |
| <!DOCTYPE> | It specifies the version of the HTML. |
| <title> | It shows the title of the content. |
| <link> | It connects the HTML document with external sources. |
| <meta> | It shows the metadata of a document. |
| <style> | It adds various styles to an element. |
Text Tags
The Html text tag defines a web page’s single-line text field. We can assign these tags to an input element’s type, as shown in the following syntax.
| Tags | Description |
| <p> | It depicts a paragraph in the document. |
| <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, | It portrays the headlines of content. |
| <strong> | It makes the text bold. |
| <em> | It puts the text in italic form. |
| <abbr> | It represents an abbreviation for a longer word. |
| <acronym> | It illustrates the acronym for a word. |
| <address> | It depicts the contact data of the author with content information. |
| <bdo> | It overrides text direction on the document. |
| <blockquote> | It specifies that content is from another source. |
| <cite> | It makes references to books, websites, and videos. |
| <q> | It depicts a short inline quotation. |
| <code> | It displays a section of the programming code in a document. |
| <ins> | It indicates texts within a document. |
| <del> | It shows deleted text in the HTML. |
| <dfn> | It indicates a defined term or phrase. |
| <kbd> | It depicts keyboard input in a document. |
| <pre> | It indicates a preformatted text in the HTML document. |
| <samp> | It represents the sample output of a computer program. |
| <var> | It specifies the name of a variable in a mathematical or programming context. |
| <br> | It applies line breaks on an element. |
Link Tags
In HTML, the link tag creates a link between a document and an external resource. The link tag also provides a reference to external style sheets.
| Tags | Description |
| <a> | It creates links on HTML documents. |
| <base> | It shows the base URL for a group of Relative URLs. |
Image and Object Tag
These tags define a container for an external resource. A web page, a picture, a media player, or a plug-in application can be considered external resources.
| Tags | Description |
| <img> | It inserts images in the HTML document. |
| <area> | It specifies the region of the image. |
| <map> | It depicts an image map. |
| <param> | It indicates the parameter of an object. |
| <object> | It embeds an object into the HTML file. |
List Tags
You can use list tags to create and manipulate various list items. Below are some list tags and their uses.
| Tags | Description |
| <ul> | It makes an unordered list. |
| <ol> | It specifies an ordered list. |
| <li> | It indicates items on a list in the HTML document. |
| <dl> | It creates a description list. |
| <dt> | It defines items in a description list. |
| <dd> | It indicates a definition for items in a description list. |
Table Tags
They create and define tables in a document. A table in HTML has one main table element and one or more sub-section elements.
The tr> element represents a table row, the th> element a table header, and the td> element a table cell.
| Tags | Description |
| <table> | It creates a table in the HTML document. |
| <tr> | It manipulates the rows and columns of a table. |
| <td> | It defines the cells in a table. |
| <th> | It depicts the head cell in a table. |
| <tbody> | It indicates the body of the content on a table. |
| <thead> | It creates the header of a table. |
| <tfoot> | It defines the footer item of a table. |
| <col> | It affects a column in a table. |
| <colgroup> | It affects a group on the column in a table. |
| <caption> | It defines a caption in a table. |
Form Tags
In HTML, you can use forms to send user information to a specific URL. Form tag defines and creates a user input form. A form may include text fields, checkboxes, radio buttons, and other elements.
| Tags | Description |
| <form> | It sets the HTML form. |
| <input> | It defines the input field in an HTML. |
| <textarea> | It defines multiple line inputs. |
| <select> | It is a form of control that provides menu options. |
| <option> | It defines the options list. |
| <optgroup> | It creates a new group with several options. |
| <button> | It creates a clickable button. |
| <label> | It defines text labels for the input field. |
| <fieldset> | It groups related items in the HTML document. |
| <legend> | It specifies the caption for items on a fieldset. |
Scripting Tags
These tags embed the HTML document to a client-side script (JavaScript). It may either contain scripting statements or point to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes in content.
| Tags | Description |
| <script> | It introduces javascript in HTML. |
| <noscript> | It provides alternative content for unsupported script types. |
Conclusion
These days, people do a lot of communication through the internet. Whether you start a website for your business or create a blog, It’s necessary to understand the basics of HTML elements.
Do you want to start as a beginner? This is a beginner-level course page that will help you get started. Also, A user-friendly online compiler from Sololearn allows users to write CSS, HTML, and JS code and run it online.
References
Juviler, J. (2022, July 25). HTML elements: What they are and how to use them. HubSpot Blog. Retrieved September 19, 2022, from https://blog.hubspot.com/website/html-elements
