HTML Tags Vs Elements
Technically, an HTML element is the collection of start tag, its attributes, an end tag and everything in between. On the other hand an HTML tag (either opening or closing) is used to mark the start or end of an element, as you can see in the above illustration.
However, in common usage the terms HTML element and HTML tag are interchangeable i.e. a tag is an element is a tag. For simplicity’s sake of this website, the terms “tag” and “element” are used to mean the same thing — as it will define something on your web page.
Case Insensitivity in HTML Tags and Attributes
In HTML, tag and attribute names are not case-sensitive (but most attribute values are case-sensitive). It means the tag
<p>, and the tag
<p> defines the same thing in HTML which is a paragraph.
<p>THIS IS A PARAGRAPH.</> <p>THIS IS ALSO A VALID PARAGRAPH.</p>
Empty HTML Elements
Empty elements (also called self-closing or void elements) are
not container tags — that means, you can not write
<hr>some content</hr> or
A typical example of an empty element, is the
<br> element, which represents a line break. Some other common empty elements are
<p>THIS PARAGRAPH CONTAINS <br> A LINE BREAK.</p> <img src="images/sky.jpg" alt="sky image"> <input type="text" name="username">
Nesting HTML Elements
Most HTML elements can contain any number of further elements (except empty elements), which are, in turn, made up of tags, attributes, and content or other elements.
The following example shows some elements nested inside the
<p>Here is some<b>bold</b> text.</p> <p>Here is some <em>emphasized</em> text.</p> <p>Here is some <mark>highlighted</mark> text.</p>
HTML tags should be nested in correct order. They must be closed in the inverse order of how they are defined, that means the last tag opened must be closed first.
<p><strong>THESE TAGS ARE NESTED PROPERLY.</strong></p> <p><strong>THESE TAGS ARE NOT NESTED PROPERLY.</p></strong>
Writing Comments in HTML
Comments are usually added with the purpose of making the source code easier to understand. It may help other developer (or you in the future when you edit the source code) to understand what you were trying to do with the HTML. Comments are not displayed in the browser.
An HTML comment begins with
<!--, and ends with
-->, as shown in the example below:
<!-- THIS IS AN HTML COMMENT --> <!-- THIS IS A MULTI-LINE HTML COMMENT THAT SPANS ACROSS MORE THAN ONE LINE --> <p>This is a normal piece of text</p>
You can also comment out part of your HTML code for debugging purpose, as shown here:
<!-- HIDING THIS IMAGE FOR TESTING <img src="images/smiley.png" alt="smiley"> -->
HTML Elements Types
Elements can be placed in two distinct groups: block level and inline level elements. The former make up the document’s structure, while the latter dress up the contents of a block.
Also, a block element occupies 100% of the available width and it is rendered with a line break before and after. Whereas, an inline element will take up only as much space as it needs.
The most commonly used block-level elements are
so on. Whereas, the commonly used inline-level elements are