HTML Basic
This chapter provides HTML Basic Examples.
If we utilize tags that you are not familiar with, don’t worry.
HTML Documents
A document type declaration <!DOCTYPE html> must appear at the beginning of every HTML document.
<html> and </html> mark the start and finish of the HTML document itself.
The HTML document’s viewable portion is located between <body> and <body>
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>
The <!DOCTYPE> Declaration
The document type is represented by the <!DOCTYPE html> declaration, which aids in browsers displaying web pages correctly.
It must occur at the top of the page, before any HTML tags, and only once.
There is no case sensitivity in the <!DOCTYPE> declaration.
For HTML5, the <!DOCTYPE> declaration is:
<!DOCTYPE html>
HTML Headings
The <h1> to <h6> tags define HTML titles.
The most essential title is defined by <h1> The least important title is defined by <h6>:
Example
<h1>This is title 1</h1>
<h2>This is title 2</h2>
<h3>This is title 3</h3>
HTML Paragraphs
The <p> tag defines an HTML paragraph. defined by:
Example
<p>This is a sentence.</p>
<p>This is another sentence.</p>
HTML Links
The <a> tag defines links in HTML:
Example
<a href="https://www.codingask.com">This is a link</a>
The href attribute contains the link’s destination.
To give more details about HTML elements, attributes are employed.
In a subsequent chapter, characteristics will be covered in more detail.
HTML Images
The <img> tag defines images in HTML.
The attributes offered are the width, height, alt text, and source file (src):
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20104%20142'%3E%3C/svg%3E" alt="Codingask.com" width="104" height="142" title="Html Basic 2" data-lazy-src="codingask.jpg"><noscript><img decoding="async" src="codingask.jpg" alt="Codingask.com" width="104" height="142" title="Html Basic 2"></noscript>
How to View HTML Source
Have you ever viewed a website and questioned, “Hey! How did they do that?”
View HTML Source Code:
To view the source code of an HTML page, use CTRL + U or right-click on the page and choose “View Page Source”. Clicking this will launch a new tab displaying the HTML source code of the page.
Inspect an HTML Element:
To view the components of an element, right-click on it (or a blank space) and select “Inspect”. This will display both the HTML and CSS of the element. You can edit the HTML or CSS directly in real time using the Elements or Styles panel.
HTML
HTML Basic Example
HTML element
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Explained
HTML5
document type declaration
HTML tags
HTML headings
HTML paragraphs
HTML links
HTML images
view HTML source
inspect HTML element
HTML, or Hypertext Markup Language, is the standard markup language used to create and structure web pages. It provides a way to define the content, layout, and functionality of a web page. In this blog section, we’ll explore some basic HTML examples to help you understand the fundamentals of this essential web development language.
HTML is composed of a series of elements, which are represented by tags enclosed in angle brackets, such as, , and . These tags define the structure and semantics of the content on a web page.
One of the most basic HTML examples is the document type declaration, which specifies the version of HTML being used. This is typically the first line of an HTML document and looks like this:.
Another essential HTML element is the tag, which encompasses the entire web page content. Within the tag, you’ll find the and sections. The section contains metadata about the page, such as the title, while the section holds the visible content.
HTML provides a variety of tags for structuring content, such as headings, etc.), paragraphs (), links (), and images (). These tags help to organize the information on a web page and make it more accessible to both users and search engines.By understanding these basic HTML examples, you can start building your own web pages and exploring the endless possibilities of HTML.
