HTML Elements
HTML, or HyperText Markup Language, is the standard language for creating web pages. It’s made up of various elements that tell the browser how to display the content. In this lesson, we’ll delve into the world of HTML elements, exploring their structure, types, and how they interact with each other.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag. It’s like a container that holds information for the browser to interpret and display. Here’s the basic structure of an HTML element:
<nameoftag> Then the content of the tag will be right here...</nameoftag>
For instance, if we want to create a heading and a paragraph, we can use the <h1> and <p> elements respectively:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
| Start Tag | Content | End Tag |
|---|---|---|
<h1> |
My First Heading | </h1> |
<p> |
My first paragraph | </p> |
<br> |
none | none |
In the table above, you can see the start tag, the content, and the end tag for each element:
Note: Some HTML elements have no content (like the
<br>element). These elements are called empty elements. Empty elements do not have an end tag!
HTML Comments
Comments are also a part of HTML. The browser does not display the comments, but they can help document your HTML source code. Here is how you write comments in HTML:
<!--This is a comment. Comments are not displayed in the browser-->
Nested HTML Elements
HTML elements can be nested, meaning that elements can contain other elements. All HTML documents consist of nested HTML elements. Let’s look at an example that contains four HTML elements (<html>, <body>, <h1>, and <p>):
<!DOCTYPE html>
<html>
<body>
<!--This is html comment. It will not be executed in our html code-->
<h1>My First Time Writing HTML</h1>
<p>I am going to really enjoy doing this.</p>
<!--Another comment-->
</body>
</html>
Here is a detailed explanation; let us start from the beginning.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration is the very first thing in an HTML document. It’s not an HTML tag; instead, it’s an instruction to the web browser about what version of HTML the page is written in.
In HTML5, the declaration is simple:
<!DOCTYPE html>
This declaration is case-insensitive and tells the browser to use standards mode and follow the HTML5 specifications.
When you include the <!DOCTYPE> declaration in your HTML document, it helps the browser display your webpage correctly. It must only appear once at the top of the page (before any HTML tags).
In this example, the <html> element is the root element and it defines the whole HTML document. It has a start tag <html> and an end tag </html>. Inside the <html> element, there is a <body> element. The <body> element defines the document’s body and contains two other elements: <h1> and <p>. The <h1> element defines a heading, and the <p> element defines a paragraph.
Note: The content inside the
<body>section will be displayed in a browser. The content inside the<title>element will be shown in the browser’s title bar or in the page’s tab.
Never Skip the End Tag
While some HTML elements will display correctly even if you forget the end tag, it’s not a good practice to rely on this. Unexpected results and errors may occur if you forget the end tag!
For instance, consider the following HTML code:
<h1>My First Time Writing HTML
<p>I am going to really enjoy doing this.Run it below
Even though we didn’t close the <p> tags, most browsers and IDE, and even aptLearn’s, as shown above, will still display the paragraphs correctly. However, this is not a good practice. The correct way to write it is:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Empty HTML Elements
HTML elements with no content are called empty elements. The <br> tag defines a line break and is an empty element without a closing tag:
HTML is Not Case Sensitive
HTML tags are not case-sensitive: <P> means the same as <p>. The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML. At aptLearn, we always use lowercase tag names.
Quick one: Write what you have learnt so far below as pratice
<!DOCTYPE html>
<html>
<body>
<!--This is html comment. It will not be executed in our html code-->
<h1>My First Time Writing HTML</h1>
<p>I am going to really enjoy doing this.</p>
<!--Another comment-->
</body>
</html>