Hello guys, in this post we are going to discuss about HTML Elements and attributes. In our previous post we looked at 'Introduction to html - how to get started with html'. If you haven't read that post, click the link to get an idea about HTML or you continue reading. Don't forget to comment if you have doubt or difficulty regarding HTML as I will be very glad to assist you.
I have made this post to be very beginners friendly so beginners and other higher levels can benefit from it. In this post you will learn everything regarding HTML Elements and its attributes. Let's list some of the points we will discuss here.
- What are HTML Elements
- HTML Elements types
- Nested HTML Elements
- What are HTML Attributes
- Examples of html Attributes
What are HTML Elements
HTML Elements are tags written in an html documents which holds the contents displayed in the browser. The elements are used to tell the browser how the contents should be displayed
Types of Html Elements.
In html documents we can categorize html elements into two types, and that is the Regular elements and empty elements.
Regular Elements
Elements with an opening tag and closing tag with contents enclosed in it, is said to be regular elements
<p>it signifies a paragraph</p>
<h1>it signifies heading 1</h1>
<h2>it signifies heading 2</h2>
Empty Elements
These are tags without closing tags and no content
For Example: the meta tag is use to define the metadata of the html documents <meta> and it's without a closing tags
How to write HTML Elements
Html elements is defined by a start tag -> contents and an end tag
<start tag>Contents goes here..</end tag>
The start and the end tag are differentiated with only a forward slash. E.g <p>...</p>
Nested HTML Elements
Html elements are always arranged hierarchically in a HTML documents. Or we can say that some elements in the documents are nested in other html elements.
See the example below
<!doctype html>
<html>
<head>
<title>My Website</title>
<meta charset="UTF-8">
</head>
<body>
<h1>My first Heading</h1>
<p>My paragraph</p>
</body>
</html>
As we can see from the example HTML codes above, the <head> tag and <body> tag are nested in the <html> tag. And inside the <head>,we have the title tag <title> and meta tag <meta>. Likewise the body tag consist of h1 element and paragraph elements.
HTML ATTRIBUTES
What are HTML Attributes?
By the word Attributes, in dictionary, it simply mean what we use to describe of a thing. Related to html, html attributes is use to describe the characteristics of html elements. And it's very important in html because it tells more information of the elements or the contents in the elements.
Key notes:
- Attributes can be given to all html elements
- The attributes of an element is specified in the first tag
- We recommend writing your attributes in lowercase
- We recommend using quotes on the values of the attributes
Attributes structure in an html tags
name="value"
Let's take a look at some html Attributes
The Lang Attribute
The lang attribute is use to declare the language of the web page and it is written in the <html> tag.
<!Doctype html>
<html lang="en-Us>
<body>...</body>
</html>
The "en-US" refers to the language country code as English language and the country is United States.
The Title Attribute
The title attribute gives more information of an element. The information is viewed when you mouse over the contents
Example:
<p title="first paragraph">This is a paragraph</p>
The src Attribute
The src Attribute is use in the <img> tag to specify the path of the image to be displayed
Example:
<img src="profile.png">
The Style Attribute
The style attribute is use to style a particular element.
Example:
<h1 style="color: blue;">This is a blue heading</h1>
The href Attributes
href stands for hyper-reference. It is use in <a> tag to specify the destination of the link
Example:
<a href="google.com">This is a link and it's destination is Google's homepage</a>
0 Comments
Post a Comment