Every HTML document <!DOCTYPE html>begins with a declaration.
HTML documents <html>begin with tags and </html>end with closing tags.
Only the part between <body>the and </body>tags is visible in the browser.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
</head>
<body>
<div id="ez-toc-container" class="ez-toc-v2_0_74 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title" style="cursor:inherit">Table of Contents</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#Quick_Learn" >Quick Learn</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#Quick_Learn-2" >Quick Learn</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class="ez-toc-link ez-toc-heading-3" href="#This_is_Heading_1" >This is Heading 1</a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-4" href="#This_is_Heading_2" >This is Heading 2</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#This_is_Heading_3" >This is Heading 3</a></li></ul></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class="ez-toc-link ez-toc-heading-6" href="#This_is_a_heading" >This is a heading</a></li></ul></nav></div>
<h2><span class="ez-toc-section" id="Quick_Learn"></span>Quick Learn<span class="ez-toc-section-end"></span></h2>
<p>A rich website for learning programming in English.</p>
<p>QUICKLEARN provides completely free education.</p>
</body>
</html>
Output
Quick Learn
A rich website for learning programming in English.
QUICKLEARN provides completely free education.
HTML heading
In HTML, <h1>the from <h6>tag refers to the HTML heading or title.
<h1>The most important heading is indicated by and <h6>the least important heading is indicated by.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings</title>
</head>
<body>
<h1><span class="ez-toc-section" id="This_is_Heading_1"></span>This is Heading 1<span class="ez-toc-section-end"></span></h1>
<h2><span class="ez-toc-section" id="This_is_Heading_2"></span>This is Heading 2<span class="ez-toc-section-end"></span></h2>
<h3><span class="ez-toc-section" id="This_is_Heading_3"></span>This is Heading 3<span class="ez-toc-section-end"></span></h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>
Output
Basic concepts of HTML
Note: HTML heading tags should never be used to make text larger or bold. Because heading tags are used to indicate the importance of the content. Only one heading should be used for a page.
HTML paragraph
<p>The tag represents an HTML paragraph.
An HTML paragraph element <p>begins with an opening tag and </p>ends with a closing tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Paragraph</title>
</head>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Output
This is a paragraph
This is another paragraph
HTML link
<a>Links are created in HTML using tags and hrefthe destination of this link is specified using attributes.
Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Link</title>
</head>
<body>
<a href="https://quicklearn3945.com/">This is a link</a>
</body>
</html>
Output
HTML image
<img>Images or pictures are displayed in the browser using HTML tags.
<img>, , and are used as attributes of the tag :srcaltheightwidth
Examples
<!DOCTYPE html>
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img loading="lazy" decoding="async" src="ql.png" alt="quicklearn3945.com" width="142" height="142">
</body>
</html>
This is a heading
This is a paragraph.
How to view HTML source code in a browser?
To find the source code of a page, right-click on the page and select “View Page Source” (in Chrome browser) or “View Source” (in IE browser) or follow the same rules for other browsers. This will open the page containing the HTML code in a new browser window.
Chapter summary
- HTML
<!DOCTYPE>begins with a document declaration. - Only
<body>the middle part of the element is displayed in the browser. <h1>From<h6>is called the heading element.<p>Paragraphs are made up of elements.<a>Links are created by elements.<img>Images are added by element.
