All you need to know about Html Elements
By Emmanuel Chinonso
Web Developer
HTML Element
When it comes to creating webpages, HTML elements are the building blocks of the web. HTML elements are the individual components that make up a web page, and they can be used to structure text, images, navigation, and more. Understanding how to use HTML elements can help you create a better web experience for your users.
Understanding the HTML Elements
To start off, let’s look at the different types of HTML elements. HTML elements can be divided into two main categories: structural elements and semantic elements. Structural elements are the basic building blocks of a webpage and are used to define the structure of a page, such as paragraphs, headings, and lists. Semantic elements are used to add meaning to the structure of a page, such as emphasizing text or providing additional context.
Once you understand the different types of HTML elements, you can start to learn more about how they work. HTML elements are made up of different attributes, such as an element’s ID, class, and style. The ID identifies a specific HTML element on a page, while the class and style attributes are used to define the look and feel of the element.
We are going to look at different types of Html elements.
HTML ELEMENT:
An HTML element is defined by a start tag, an end tag and some content in-between the tags.
Example
<tagname> content goes here <tagname>The html element is everything from the start tag to the end tag:
Starting tag Element content End Tag
h1 My first statement h1
The HTML element without content are called empty element. Empty elements do not have an end tag, such as <br> (this is a line break).
Nested HTML Element
HTML element can contain element inside it or can be nested with element. All HTML documents contain nested element
HTML Code
<!DOCTYPE html><html> <body> <h1>my first web heading</h1> </body></html>CODE EXPLAINED
The <html> element defines the whole document and represent the root element. It has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is <body> element nested within the <html> element. <body> tag defines the body of the web. Inside the <body> tag is the <h1> element nested inside it.
Never forget the end tag.
Some editors will help you put your end tag when you write the code. However, sometimes this may not be the case, and unexpected error will occur when you forget to put the tag.
Empty HTML ELEMENTS
As we stated, earlier HTML elements with no content are called empty elements. The <br> tag is an example of an empty element and it defines a line break.
Html code
<p> This is a <br /> paragraph with a line break.</p>This is how the code looks like:
This is a
paragraph with a line break.
HTML is not case sensitive
HTML tags are not case sensitive. For example, the <p> means the same as <p>. It is always better if you use the lower case when you write HTML tags.
HTML ATTRIBUTES
HTML attributes are always specified at the beginning of a tag, and it usually provides additional information about the element. It usually come in name/value pairs: name="value"
The href Attribute:
The HTML links are usually defined with <a> tag while the link address is specified in the href attribute:
Html code:
<a href="https://google.com"></a>The src Attribute:
The <img> tag used to embed an image in an HTML page. The src attributes provides additional information such as providing the path of the image to be displayed.
Html code
<img src="img-home.jpg" />There are two ways to specify the url in the src attribute:
The absolute URL – link to external images that are hosted on another website. eg src="http://www.google.com/images/img-girl.jpg".
Relative URL- links to an image that is hosted within the website. eg src="img-girl.jpg".
Its usually best to use the relative Urls. They will not break if you change domain.
The width and height Attribute: Images are known to have a set of size attributes, which specifies the width and height of the image.
Html code
<img src="img-gril.jpg" width="250" height="500" />The alt Attribute: The alt attributes specify the alternative message to display if the message is not shown there. Screen readers can read the value of the attribute. This way, someone with impaired vision listening will hear the value of the element.
Html code
<img src="https://gooogle.com/img/logo/gooogle.jpg" alt="google image with white background" />The style Attribute: This is used to defined the styling of an element such as color, font, size etc.
Html code
<h1 style="color : blue">Attributes in html</h1>The lang Attribute: The language of the html document can be declared with the lang attribute This is important for accessibility application and search engines.
Html code
<!DOCTYPE html><html lang="en-US"> <body> <p>home all</p> </body></html>The first two letter shows the language(en). And if there is a dialect, you can add it (US).
The title Attribute:
The title attribute can be added to a <p> element. The title attributes add more information about that element.
Html code
<p title="Im unstoppable">This is a track record.</p>Conclusion
In this article, we discussed HTML elements, examples of these elements, and their uses in a web project. We also use our newly acquired knowledge of HTML tags and HTML elements to create a simple webpage, on which we displayed images, links etc.
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.
Related Posts