LERAN PHP COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.


HTML Element Syntax

An HTML element is an individual component of an HTML document. It represents semantics, or meaning. For example, the title element represents the title of the document.

Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag), with content in between. Elements can also contain attributes that defines its additional properties. For example, a paragraph, which is represented by the p element, would be written as:

html element


Tips: All elements don't require the end tag or closing tag to be present. These are referred as empty elementsself-closing elements or void elements.

Nested HTML Elements

HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

This example contains four HTML elements:


<!DOCTYPE html>
<html>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

Example Explained

The <html> element defines the whole document.

It has a start tag <html> and an end tag </html>.

Inside the <html> element is the <body> element.

<html>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

Inside the <body> element is two other HTML elements: <h1> and <p>.

Example

<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.

The element content is: My First Heading.

Example

<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element content is: My First paragraph.

Example

<p>My First paragraph</p>

Do Not Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

<!DOCTYPE html>
<html>    
    <body>
         <h1>My First Heading</h1>
         <p>My first paragraph.</p>
    </body>
</html>

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 <br>some content</br>.

A typical example of an empty element, is the <br> element, which represents a line break. Some other common empty elements are <img><input><link><meta><hr>, etc.

<p>This paragraph contains <br> a line break.</p>
<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">

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:

Example

<!--This is an HTML comment-->

HTML Is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demandslowercase for stricter document types like XHTML.


Click on the "Try it Yourself" button to see how it works.

Previous Next
x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine