Main Tutorials

HTML Elements

As simple, HTML documents are simply a text file made up of many HTML elements. These HTML elements are always between a start tag and end tag. Where the element appears is determined by the order in which the tags appear.

HTML Elements

An HTML element is everything from the start tag to the end tag:

Start tag Hello world End tag
<p> Hello world </p>

html-elements-1
html-elements-2

Explanation of code

The <p> tag declares a paragraph, and display the text “Hello world” in your internet browser. As you see, the HTML elements is start with a start tag or opening tag, which is <>, and ends with an end tag or closing tag, which is </>. This is HTML rule, almost all HTML elements has a start tag and end tag.

However, some HTML elements has empty content, For example <br /> which is use to give a line break in HTML file. This special empty HTML element is closed in the start tag

Remember – Always close you HTML tag

A lot of internet browsers will still display the HTML elements property even it does not contain an correct end tag, so why bother? First, I will highly suggest you do no rely on this browser’s feature, because this is very dangerous, forgetting to close an end tag can produce many unexpected errors or behaviors. In addition, when you HTML code getting messy (whose HTML code is not messy?) , you are quite hard to debug or find out where your end tag should put.

HTML tags in UPPERCASE or lowercase?

This is very common question, HTML tags are not case sensitive: <h1> means the same as <H1>. This is up to your personal preference. However i still suggest you using lowercase if possible, because World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in future versions of (X)HTML, it’s better follow the W3C standard , else you may need to change your code in future :).

For example

<P></P> – Not recommend
<p></p> – Recommended
<HEAD></HEAD> – Not recommend
<head></head> – Recommended

HTML tags in CAmeL caSe

Yes, you can define HTML tag as camel case : <HeaD></HEAd> , browser will display it correctly as well. The question is why on earth you want to make your code like this? 🙂

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments