Donate with
Categories
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
Created: March 30th 2021
Last updated: May 19th 2022
Categories: Common Web Development
Author: Tim Fürer
Last updated: May 19th 2022
Categories: Common Web Development
Author: Tim Fürer
HTML Basics: Elements
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
HTML sites are built from elements, referred to as "tags". These elements are defined using angle brackets ( < > ).
A basic HTML element would look like this: <div>
Let us take a look at how elements in HTML work.
Opening an HTML Tag
To open an element (define its beginning/existence), simply write the element's name enclosed by angle brackets.
<element>Closing an HTML Tag
Once opened, most elements must be closed again (define its ending). To achieve that, write the element's name enclosed by angle brackets, however, place a slash in-between the opening bracket and the element's name.
</element>Note that not all elements must be closed. For example, the <img> tag must not be.
HTML Tags Acting as Containers
Elements that must be closed work like containers. They can hold text and/or elements. Place the content in-between the opening and closing definitions of the element.
<element>Hello World</element><element1><element2></element2></element1>HTML Tags' Attributes
Elements have attributes that can be configured. Configurations are placed after the element's name in the opening definition and are separated by spaces. A configuration usually consists of an attribute's name and a value enclosed in quotations, connected by an equals. Some attributes do not require a value to be provided. In such cases, the value and equals may be omitted.
<element attribute="value"><element attribute1="value" attribute2>If not configured, attributes simply use their default value.
Conclusion
Now that you are aware of how HTML elements work, here, an example that utilizes all you have been taught throughout this guide:
<p>Visit the <a href="https://www.lexo.ch/blog/">Lexo Blog</a> for many <b>cool</b> and <i>informative</i> guides.</p>The example's HTML code will be rendered like this:
Visit the Lexo Blog for many cool and informative guides.
The <p> tag declares a paragraph (a set of text that has a margin at its bottom). Inside, we have our sentence. To make the words "Lexo Blog" link to our blog, we enclose them in an <a> tag (an anchor). This tag defines a hyperlink, and its destination can be set through the "href" attribute. For the words "cool" and "informative" to be formatted bold and italic, we use the <b> and <i> tags, respectively.