HTML Elements

What are HTML Elements?

Everyting inside Starting Tags(<TagName>) to Ending Tags(</TagName>) is called HTML Elements.
<TagName>Your Content</TagName>

Example of HTML Elements:
<h1>Codingwith Anas</h1>
<p>Codingwith Anas</p>

Important points

  • HTML Elements can contain Another HTML Elements.
  • Every HTML Elements should have an Ending tags.
  • Some HTML Elements do not have ending tags they are called Empty-Elements like: <br>(Break), <hr>(Horizontal Row) and many more.
  • HTML Elements are Not Case Sensitive.
                                

                                    
                                        

                                            Starting Tags
                                            Elements Content
                                            Ending Tags
                                            Display
                                        

                                    
                                    
                                    
                                        

                                            <h1>
                                            Codingwith Anas Heading
                                            </h1>
                                            
Codingwith Anas Heading

                                        

                            
                                        

                                            <p>
                                            Codingwith Anas Paragraph
                                            </p>
                                            
Codingwith Anas Paragraph

                                        

                                        
                                        

                                            <b>
                                            Codingwith Anas Bold
                                            </b>
                                            Codingwith Anas Bold
                                        

                                    
                                        

                                            <strong>
                                            Codingwith Anas Strong
                                            </strong>
                                            Codingwith Anas Strong
                                        

                                    
                                        

                                            <i>
                                            Codingwith Anas Italic
                                            </i>
                                            Codingwith Anas Italic
                                        


                                        

                                            <em>
                                            Codingwith Anas Emphasize
                                            </em>
                                            Codingwith Anas Italic
                                        


                                        

                                            <br>
                                            none
                                            none
                                            none
                                        


                                        

                                            <hr>
                                            none
                                            none

In the above Table, There are some examples of basic HTML-Tags. There many more Tags. You will learn more tags in our next chapters.


HTML Nested-Elemets

Every HTML Elements can contain other HTML Elemets, When these HTML Elemets contains other HTML Elemets it becomes HTML Nested-Elemets.
Every HTML-Document consists(are of) of HTML Nested-Elemets.
The document given below have 6 HTML Nested-Elemets.

<!DOCTYPE html>
<html>
         <head>
                  <title>Welcome to Codingwith Anas</title>
         </head>
<body>
         <h1>Codingwith Anas Heading</h1>
         <p>Codingwith Anas Paragraph</p>
</body>
</html>

Explaination of given code

  • The Element <html> is the root of the HTML page.
    It has a Starting Tag <html> and Ending Tag </html>.
    Inside the Element <html> there are two Elements <head> and <body>.

  • The Element <head> contains meta and title.
    It has a Starting Tag <head> and Ending Tag </head>.
    Inside the Element <head> there is a <title> Element.

  • The Element <title> is used to specify the page title.
    It has a Starting Tag <title> and Ending Tag </title>.
    Inside the Element <title> there is a Content Welcome to Codingwith Anas.

  • The Element <body> defines the body document, It is a container for all visible contents Ex: Headings, Paragraphs, Links, Images and many more.
    It has a Starting Tag <body> and Ending Tag </body>.
    Inside the Element <body> there are two Elements <h1> and <p> Elements.

  • The Element <h1> is defined to display Heading.
    It has a Starting Tag <h1> and Ending Tag </h1>.
    Inside the Element <h1> there is a Content Codingwith Anas.

  • The Element <p> is defined to display Paragraph.
    It has a Starting Tag <p> and Ending Tag </p>.
    Inside the Element <p> there is a Content Codingwith Anas.

Never ever skip the Ending Tags

Some HTML Elements will not couse errors and will display correctly, even if you forgot the ending tag.
However, Never forget the ending tag else Unexpected error will occur!!!

<!DOCTYPE html>
<html>
         <head>
                  <title>Welcome to Codingwith Anas</title>
         </head>
<body>
         <h1>Codingwith Anas Heading
         <p>Codingwith Anas Paragraph
</body>
</html>


HTML Empty-Elements

HTML Elements that do not have ending tags and cannot contain Elements-Content are called Empty-Elements.
Ex: <br> tag defines Line Break and it is an Empty-Element because it do not have an Ending tag

<p>Codingwith <br> Anas</p>


HTML Elements are not Case Sensitive

HTML Elements are not Case Sensitive because, It can Not scence LowerCase and UpperCase letters Ex: UpperCase <P> is same as LowerCase <p> but, We Recommend you to use LowerCase letters because this keep code clean and the old vesion of HTML = XHTML was very strict in Case Sensitive and was only allowded to use LowerCase letters. What is XHTML?

<p>Codingwith Anas LowerCase Paragraph Element</p>
<P>Codingwith Anas UpperCase Paragraph Element</P>

Let's find out more in HTML!