Read Lesson 1 – Introduction to HTML Tutorial Use and Code

Check Lesson 1 – Introduction to HTML Tutorial from Learn HTML section on e akhabaar

This is a html tutorial for beginners to advance, where we have covered every single topic step by step with examples and practice exercises.  After reading this chapter, you will get basic idea about html structure, html tags and html elements.

1. What is HTML?

  • HTML stands for “Hypertext Markup Language”. It is used to create the structure of web pages.
  • HTML is very simple to learn and after going through this tutorial you can easily create your own website using html.
  • HTML works around elements which are represented by opening <> and closing tags .

2. What are HTML elements?

HTML elements are the building blocks of a web page, which define its structure. For example:

  • Document Type (html or any other document),
  • Title of the document 
  • Body content
  • Headings
  • Paragraphs
  • Style etc

3. What are HTML tags?

HTML tags define how a web page should look like. These tags work in pair e.g. opening tag and closing tag. Opening tag tells a browser when to start and closing tag defines when to end.

For example – a webpage consist of Headings, Body and Paragraph etc. So an opening tag in Heading would define when to start a heading and a closing tag will define when to end. Similarly an opening tag in Paragraph would tell a browser when to start a new paragraph and a closing tag would define when to end.

4. What is the difference between HTML elements and tags?

A HTML tag is part of HTML element. For example a header element of a web page is made up of following opening and closing tags and content in between them:


  • – opening tag
  •  Learn free html at freetutorialpoint.com  – content part
  • – closing tag

 Proper syntax for a header element is:

 

Learn free html at freetutorialpoint.com  

5. How does HTML tags works?

HTML tags works in pair and represented by a surrounded angle bracket. Opening bracket is represented by< > and a closing bracket is represented by .

For example –

  • Opening tag for a heading is represented by

    and a closing tag is represented by

  • Opening tag for a paragraph is represented by

    and a closing tag is represented by

Syntax for html tag:

  •   Some text

For example:

  • Learn HTML

  • New Paragraph starts from here

6. Do all HTML tags have a closing tag?

No, it’s not necessary; there are some html tags which don’t need a closing tag. E.g.  Line break tag
and image tag . We will discuss more about them in further chapters.

7. How does a HTML Structure look like?

  • This tag is used by web browsers to understand the document type and its version. It must be written on the top of the document before all html tags.
  • defines html web page.
  • defines header tag.
  • </strong></em> defines title tag.</span></li> <li><span><em><strong><Body></strong></em> defines body tag.</span></li> <li><span><em><strong><H1></strong></em> defines heading tag.</span></li> <li><span><em><strong><P></strong></em> defines paragraph tag.</span></li> </ul> <h2><strong><span>8. HTML versions: </span></strong></h2> <table readabilityDataTable="1"> <tbody> <tr> <td><span><strong>Version</strong></span></td> <td><span><strong>Year</strong></span></td> </tr> <tr> <td><span>HTML</span></td> <td><span>1991</span></td> </tr> <tr> <td><span>HTML +</span></td> <td><span>1993</span></td> </tr> <tr> <td><span>HTML 2</span></td> <td><span>1995</span></td> </tr> <tr> <td><span>HTML 3.2</span></td> <td><span>1997</span></td> </tr> <tr> <td><span>HTML 4.1</span></td> <td><span>1999</span></td> </tr> <tr> <td><span>XHTML</span></td> <td><span>2000</span></td> </tr> <tr> <td><span>HTML 5</span></td> <td><span>2012</span></td> </tr> <tr> <td><span>XHTML 5</span></td> <td><span>2013</span></td> </tr> </tbody> </table> <h2> <strong><span>Interview Questions: </span></strong></h2> <ol> <li><span>What is HTML?</span></li> <li><span>Do all html tags have a closing tag?</span></li> <li><span>Difference between HTML tag and HTML element?</span></li> <li><span>What is the latest HTML version and when it is released.</span></li> </ol> </div> </article> <p>Post your comments about Lesson 1 – Introduction to HTML Tutorial below.</p> </div> <div class="cs-entry__tags"><ul><li><a href="https://www.eakhabaar.com/list/html" rel="tag">html</a></li></ul></div> </div> </div> <div class="cs-entry__footer"> <div class="cs-entry__footer-top"> <div class="cs-entry__footer-top-left"> <div class="cs-entry__post-meta" ><div class="cs-meta-author"><span class="cs-meta-author-by">By</span><a class="cs-meta-author-link url fn n" href="https://www.eakhabaar.com/author/guest"><picture class="cs-meta-author-avatar"></picture><span class="cs-meta-author-name">Guest</span></a></div></div> <div class="cs-entry__footer-date"> <div class="cs-entry__footer-date-inner"> <span class="cs-entry__footer-title">Updated on</span> <time class="cs-entry__footer-value">May 06, 2021</time> </div> </div> </div> <div class="cs-entry__footer-top-right"> </div> </div> </div> <section class="cs-read-next"> <div class="cs-read-next__heading"> <h2> Read Next </h2> </div> <div class="cs-posts-area__read-next cs-posts-area__list"> <article class="cs-entry"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <h3 class="cs-entry__title"><a href="https://www.eakhabaar.com/song-hello-hey-how-you-doing-toosii-lyrics.html"><span>Song Hello Hey How You Doing Toosii Lyrics</span></a></h3> <div class="cs-entry__excerpt"> Full Lyrical Translation of Song Hello Hey How You Doing Toosii Lyrics on e akhabaar. “Hello Hey How… </div> </div> </div> </article> <article class="cs-entry"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <h3 class="cs-entry__title"><a href="https://www.eakhabaar.com/watch-trishna-web-series-cast-wiki-poster-trailer-video-and-all-episodes-details.html"><span>Watch Trishna Web Series Cast, Wiki, Poster, Trailer, Video and All Episodes Details</span></a></h3> <div class="cs-entry__excerpt"> Online information of Trishna Web Series Cast, Wiki, Poster, Trailer, Video and All Episodes on e akhabaar India… </div> </div> </div> </article> <article class="cs-entry"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <h3 class="cs-entry__title"><a href="https://www.eakhabaar.com/song-kya-kiya-hain-tune-lyrics-broken-but-beautiful-season-3-web-series.html"><span>Song Kya Kiya Hain Tune Lyrics – Broken But Beautiful Season 3 Web Series</span></a></h3> <div class="cs-entry__excerpt"> Full Translation of Song Kya Kiya Hain Tune Lyrics – Broken But Beautiful Season 3 Web Series on… </div> </div> </div> </article> </div> </section> </div> </div> </div> </div> </div> </main> <footer class="cs-footer"> <div class="cs-container"> <div class="cs-footer__item cs-footer__item-top-bar"> <div class="cs-footer__item-inner"> <div class="cs-footer__col cs-col-left"> <div class="cs-logo"> <a class="cs-footer__logo cs-logo-default" href="https://www.eakhabaar.com/"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCAxNTAgNDEiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" data-src="https://www.eakhabaar.com/wp-content/uploads/LogoMakr_2oOBWw-1-1-min.png" alt="e akhabaar" width="150" height="41" ><noscript><img src="https://www.eakhabaar.com/wp-content/uploads/LogoMakr_2oOBWw-1-1-min.png" alt="e akhabaar" width="150" height="41" ></noscript> </a> <a class="cs-footer__logo cs-logo-dark" href="https://www.eakhabaar.com/"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCAxNTAgNDEiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" data-src="https://www.eakhabaar.com/wp-content/uploads/LogoMakr_2oOBWw-1-1-min.png" alt="e akhabaar" width="150" height="41" ><noscript><img src="https://www.eakhabaar.com/wp-content/uploads/LogoMakr_2oOBWw-1-1-min.png" alt="e akhabaar" width="150" height="41" ></noscript> </a> </div> <div class="cs-footer__desc"> Your one stop to every article & news </div> </div> <div class="cs-footer__col cs-col-center"> <div class="cs-footer__nav-menu"> </div> </div> <div class="cs-footer__col cs-col-right"> </div> </div> </div> <div class="cs-footer__item cs-footer__item-bottom-bar"> <div class="cs-footer__item-inner"> <div class="cs-footer__copyright"> ©️ 2023 — E Akhabaar. No Rights Reserved. </div> </div> </div> </div> </footer> </div> </div> <script id="csco-scripts-js-extra" src="data:text/javascript;base64,dmFyIGNzTG9jYWxpemU9eyJzaXRlU2NoZW1lTW9kZSI6InN5c3RlbSIsInNpdGVTY2hlbWVUb29nbGUiOiIxIn0=" defer></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" src="https://www.eakhabaar.com/wp-content/litespeed/js/268c3753257f01eed71638f0c59d8eae.js?ver=8082d" defer></script></body> </html> <!-- Page cached by LiteSpeed Cache 6.1 on 2024-04-27 11:35:04 -->