HTML Elements
A start tag, some content, and an end tag define an HTML element.
HTML Elements
Everything between the start and finish tags is an HTML element:
<tagname> Write content here.. </tagname>
Examples of some HTML elements:
<h1>My First Title</h1>
<p>My first sentence</p>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Title | </h1> |
| <p> | My first sentence. | </p> |
| <br> | none | none |
Notice:
The <br> element is one example of an HTML element that is empty. We refer to these components as empty elements. Elements that are empty lack an end tag!
Nested HTML Elements
HTML elements have the ability to nest or contain other components.
HTML documents are made entirely of nested HTML elements.
The four HTML elements in the sample below are <html>, <body>, <h1>, and <p>:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Title</h1>
<p>My first sentence.</p>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Example Explained
The root element that defines an HTML document is the <html> element.
Its tags are <html> for the start and </html> for the finish.
Next, a <body> element is present inside the <html> element:
<body>
<h1>My First Title</h1>
<p>My first sentence.</p>
</body>
The document’s body is defined by the <body> element.
Its tags are <body> for the start and <body> for the finish.
<h1>My First Title</h1>
<p>My first sentence.</p>
A heading is defined by the <h1> element.
It is made up of two tags, <h1> and </h1>:
<h1>My First Title</h1>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>:
<p>My First Title.</p>
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
Example
<html>
<body>
<p>This is a title
<p>This is a title
</body>
</html>
But never depend on this! You risk unexpected outcomes and errors if you forget the end tag!
Empty HTML Elements
Elements in HTML that are empty are those that have no content.
Without a closing tag, the <br> tag is an empty element that indicates a line break:
Example
<p>This is a <br> title with a line break.</p>
HTML is Not Case Sensitive
HTML tags do not care about case; <P> and <p> have the same meaning.
Although lowercase tags are not required by the HTML standard, the W3C advises using them in HTML and requires them for more stringent document types like XHTML.
At CodingAsk we always use lowercase tag names.
HTML
HTML5
HTML elements
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML elements
HTML tags
Nested HTML elements
Empty HTML elements
HTML case sensitivity
Mastering HTML Elements: A Comprehensive Course
Dive into the world of HTML elements and unlock the secrets to building robust web pages. In this informative course, we’ll explore the fundamental building blocks of HTML, from basic tags to nested structures and empty elements.
HTML, or Hypertext Markup Language, is the standard language used to create and structure web pages. Understanding the various HTML elements and how they work together is crucial for any aspiring web developer or designer.
Throughout this course, we’ll cover:
– HTML5 elements and their specific uses
– Proper syntax and case sensitivity for HTML tags
– Nested HTML elements and how they create hierarchical structures
– Empty HTML elements and their unique properties
– Real-world examples and hands-on exercises to reinforce your learning
Whether you’re a beginner or looking to expand your HTML knowledge, this comprehensive course will equip you with the skills and confidence to create visually appealing and semantically correct web pages. Enroll now and take the first step towards becoming an HTML expert.
