HTML Basics - A Simple Guide to HTML

Anurag Sinha  Print 
13 Sep 2018
 
Beginner
103

In the previous article, we saw how HTML came into the picture and what alterations/versions it went through.Let's deep dive into HTML and start to learn the basics. A simple basic HTML document will look like something as below:

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"/> 
 <title>Sample HTML5 Document</title> 
</head> 
 <body> 
 Lorem ipsum dolor sit amet, 
 consectetur adipiscing elit, 
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</body> 
</html>

We see that an HTML document is composed of various tags. These tags actually perform the magic when rendered on a browser, these tags may help us to bold the text, insert a footer section, and insert an image etc. Hence we would need to have a broader look at the HTML tags to start with.Diagrammatically, an HTML tag can be described as below

An HTML tag has content wrapped up within an opening/closing tag combination.Content along with both the opening and closing tag close knit together forms an HTML element. Over her, h1 is an HTML element which has content as “Welcome”.

HTML TAGS

HTML provides us with a list of tags to make our websites look as we want them to look like.Let’s have a look at them in strategic document order so that it becomes easy to search them within this article.

ROOT

<html> : Root element, all other elements must be within this root element.

METADATA

Metadata as the name suggests, is the manifest or information about the web page. Includes information about page styles, title etc.

  • <link> : Used to link to a style sheet.

  • <meta> : Used to specify the encoding format used to characterize the web page.

  • <title>: Used to include the title of the web page.

CONTENT

  • <body> : Used to include content in the web page. Only one <body> element is allowed per web page.

  • <address> : Used to include address/contact info.

  • <article> : As the name suggests, it’s a separate section used to include a blog, a forum post, a magazine article etc.

  • <aside> : As the name suggests, its used to include some extra information regarding the main content.

  • <footer> : Used to include footer content in the web page, like licensing information, copyright information etc.

  • <header> : Used to include header content in the web page, like information about the page, summary etc.

  • <h1> to <h6> : Section Headings, there are 6 levels.

  • <main> : Used to include the main centralized topic of the web page.

  • <nav> : Used to provide navigational links, ex: menus.

  • <section> : Used to represent a section in the web page.

  • <blockquote> : Used to represent a quoted section, usually from another web page, another book etc.

  • <dl> : HTML Description List

  • <dt> : Should be present inside a <dl> element and used to include terms.

  • <dd> : Used to include description or summary about the <dt> term.

  • <figure> : Used to basically represent an image and its caption

  • <figcaption> : Used to include caption for an image inside a <figure> element.

  • <hr> : Used to include a horizontal line.

  • <ul> : Used to include an un-ordered list in a web page. It renders a bulleted list.

  • <ol> : Used to include an ordered list in a web page. It renders a numbered list.

  • <li> : Used to include content inside a <ul> or <ol>.

  • <p> : As the name suggests, it is used to include a paragraph in a web page.

  • <pre> : Used to include texts which are pre-formatted, i.e. they will display as they are written in the HTML page, without any formattings/effects.

  • <a> : Used to include a hyperlink and connect to other webpages, other locations within the web page etc.

  • <abbr> : Used to include abbreviation in the web page.

  • <b> : Used to bold a piece of text or paragraph in the web page.

  • <br> : Used to include a line break in the web page.

  • <cite> : Used to include a reference to a cited work.

  • <code> : Used to include a code snippet in the web page, by default, the code will be displayed in monospace font.

  • <data> : Used to link a content with machine readable translation.

  • <em> : Used to emphasize a piece of text or paragraph.

  • <i> : Used to italicize a piece of text of paragraph.

  • <kbd> : Used to include keyboard related text in the web page.

  • <mark> : Used to highlight a piece of content in the web page.

  • <q> : Used to wrap up a piece of content in quotation marks.

  • <s> : Used to strike out a piece of content in the web page.

  • <samp> : Used to represent an information in output from a computer program.

  • <small> : Used to make the enclosed text a size smaller.

  • <span> : It’s a container element to include texts.

  • <strong> : Used to bold a piece of text/paragraph so that it comes out as of importance.

  • <sub> : Used to render subscript.

  • <sup> : Used to render superscript.

  • <time> : Used to include time components in the web page for better SEO.

  • <u> : Used to underline a piece of text or paragraph.

  • <var> : Used to include variable names in the web page, in programming contexts, will italicize the enclosed content.

  • <wbr> : Used to include a word break.

Examples of the above elements, and their respective outputs in browser can be found in the below HTML codes and snapshots.

 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>HTML5 Basics</title> 
 <link href="wwwroot/css/styles.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <h3><code>address</code> element example:</h3> 
 <address> 
 Flat No. 104. <br> 
 Hudson's Street <br> 
 Chicago IL 
 </address> 
 
 <h3><code>article</code> element example:</h3> 
 <article> 
 <h1>FIFA World Cup 2018</h1> 
 <article> 
 <h2>Winners</h2> 
 <p>France</p> 
 </article> 
 <article> 
 <h2>Runners Up</h2> 
 <p>Croatia</p> 
 </article> 
 <article> 
 <h2>3rd Place</h2> 
 <p>Belgium</p> 
 </article> 
 </article> 
 
 <h3><code>aside</code> element example:</h3> 
 <p>Jurassic World 2018</p> 
 <aside> 
 <p> 
 <i> 
 Dinosaurs appeared around 243 million years ago <br> 
 and were from Reptiles family. 
 </i> 
 </p> 
 </aside> 
 
 <h3><code>footer</code> element example:</h3> 
 <footer> 
 <p>Copyright 2018</p> 
 <p> 
 Please contact: <a href="mailto:abcd@gmail.com"> 
 abcd@gmail.com 
 </a>. 
 </p> 
 </footer> 
 
 <h3><code>header</code> element example:</h3> 
 <header> 
 <h1>Very important text</h1> 
 </header> 
 <p>Lorem Ipsum dolor set amet....</p> 
 
 <h3>h1 to h6 elements example:</h3> 
 <h1>Lorem Ipsum dolor set amet....</h1> 
 <h2>Lorem Ipsum dolor set amet....</h2> 
 <h3>Lorem Ipsum dolor set amet....</h3> 
 <h4>Lorem Ipsum dolor set amet....</h4> 
 <h5>Lorem Ipsum dolor set amet....</h5> 
 <h6>Lorem Ipsum dolor set amet....</h6& 
 <h3><code>main</code> element example:<
 <main> 
 <h1>Operating Systems.</h1> 
 <p>Windows, Linux, MacOs.</p> 
 
 <article> 
 <h1>Windows</h1> 
 <p> 
 Provided by Microsoft. 
 </p> 
 </article> 
 
 <article> 
 <h1>Linux</h1> 
 <p>Various distributions, Open Source.</p> 
 </article> 
 
 <article> 
 <h1>MacOS</h1> 
 <p>Provided by Apple.</p> 
 </article> 
 </main> 
 
 <h3><code>nav</code> element example:</h3> 
 <nav> 
 <a href="http://www.google.com">Google</a> | 
 <a href="http://www.facebook.com">Facebook</a> | 
 <a href="http://www.apple.com">Apple</a> | 
 <a href="http://www.microsoft.com">Microsoft</a> 
 </nav> 
 
 <h3><code>section</code> element example:</h3> 
 <section> 
 <h1>Linux</h1> 
 <p>Open Source OS, various distros such as Ubuntu, Fedore, CentOS, Suse etc.</p> 
 </section> 
 
 <h3><code>blockquote</code> element example:</h3> 
 <blockquote cite="https://www.rd.com/culture/quotes-from-books/"> 
 <p>It’s the possibility of having a dream come true that makes life interesting.</p> 
 </blockquote> 
 <cite>– Paulo Coelho, The Alchemist</cite> 
 
 <h3><code>dl dt dd</code> elements example:</h3> 
 <dl> 
 <dt>New Delhi</dt> 
 <dd>Capital of India.</dd> 
 <dt>Washington, DC</dt> 
 <dd>Capital of USA.</dd> 
 </dl> 
 
 <h3><code>div</code> element example</h3> 
 <div><p>I am a paragraph element inside a <code>div</code> element.</p></div> 
 
 <h3><code>figure figcaption</code> elements example:</h3> 
 <figure> 
 <img src="https://blog.bufferapp.com/wp-content/uploads/2014/05/dreamstimefree_169606.jpg" alt="Coffee" height="100" width="100" /> 
 <figcaption>Coffee Beans</figcaption> 
 </figure> 
 
 <h3><code>hr</code> element example:</h3> 
 <p>Line 1</p> 
 <hr> 
 <p>Line 2</p> 
 
 <h3><code>ul, ol, li</code> elements example:</h3> 
 <ul> 
 <li>List Item 1</li> 
 <li>List Item 1</li> 
 <li>List Item 1</li> 
 </ul> 
 <ol> 
 <li>List Item 1</li> 
 <li>List Item 1</li> 
 <li>List Item 1</li> 
 </ol> 
 
 <h3><code>p</code> element example:</h3> 
 <p>I am a paragraph element.</p> 
 
 <h3><code>pre</code> element example:</h3> 
 <pre> 
 H E L L O 
 F R O M 
 P R E 
 T A G 
 </pre> 
 
 <h3><code>a</code> element example:</h3> 
 Click <a href="http://www.google.com">HERE</a> to browse Google!! 
 
 <h3><code>abbr</code> element example:</h3> 
 <abbr title="Goods and Services Tax">GST</abbr> 
 
 <h3><code>b</code> element example:</h3> 
 <b>I have been bolded by <code>b</code> element.</b> 
 
 <h3><code>br</code> element example:</h3> 
 Line 1<br /> 
 Line 2 
 
 <h3><code>cite</code> element example:</h3> 
 Images from <cite><a href="https://images.google.com/">Google Images</a></cite> 
 
 <h3><code>code</code> element example:</h3> 
 I am a <code>code</code> element. By default, I'll display content in <code>monospace</code> font. 
 
 <h3><code>em</code> element example:</h3> 
 <em>I have been emphasized by the <code>em</code> element.</em> 
 
 <h3><code>i</code> element example:</h3> 
 <i>I have been italicized by the <code>i</code> element.</i> 
 
 <h3><code>kbd</code> element example:</h3> 
 Press <kbd>Ctrl F5</kbd> to reload the page. 
 
 <h3><code>mark</code> element example:</h3> 
 <mark>Hello There!!</mark> 
 
 <h3><code>q</code> element example:</h3> 
 <q>Hello World!!</q> 
 
 <h3><code>s</code> element example:</h3> 
 <s>I have been striked out.</s> 
 
 <h3><code>samp</code> element example:</h3> 
 <samp>404: Page Not Found</samp> 
 
 <h3><code>small</code> element example:</h3> 
 <small>This text has been made smaller by the <code>small</code> element.</small> 
 
 <h3><code>span</code> element example:</h3> 
 <span>I am a span element.</span> 
 
 <h3><code>strong</code> element example:</h3> 
 <strong>Strong Element.</strong> 
 
 <h3><code>sub</code> element example:</h3> 
 C<sub>2</sub>H<sub>5</sub>OH 
 
 <h3><code>sup</code> element example:</h3> 
 (a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab 
 
 <h3><code>u</code> element example:</h3> 
 <u>I have been underlined.</u> 
 
 <h3><code>var</code> element example:</h3> 
 Area of a rectangle is calculated by <var>l</var> x <var>b</var> 
 
 </body> 
 </html> 
 

MULTIMEDIA

  • <audio> : Used to include an audio content in the web page.

  • <img> : Used to include an image in the web page.

  • <map> : Used to include an image map in the web page along with the <area> element.

  • <track> : Used within an <audio> or <video> element to handle subtitles, captions, descriptions etc. of a video or audio in the web page.

  • <video> : Used to include a video in the web page.

Examples of the above elements and their respective outputs in browser can be found in the below HTML code and snapshots

 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>HTML5 Basics</title> 
 <link href="wwwroot/css/styles.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <h3><code>audio</code> element example</h3> 
 <audio controls src="http://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3"> 
 Your browser does not support the 
 <code>audio</code> element. 
 </audio> 
 
 <h3><code>img</code> element example:</h3> 
 <img src="https://blog.bufferapp.com/wp-content/uploads/2014/05/dreamstimefree_169606.jpg" alt="Coffee" height="100" width="100" /> 
 
 <h3><code>map</code> element example:</h3> 
 Please refer <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map">this</a> 
 
 <h3><code>video</code> element example:</h3> 
 <video controls 
 muted 
 src="https://www.youtube.com/watch?v=b3sp1egBb0s" 
 width="300" 
 height="200"> 
 Your browser doesn't support videos. 
 </video> 
 </body> 
 </html> 
 

EMBEDDED CONTENT

  • <iframe> : Used to basically include another HTML web page to the current one.

  • <object> : Used to include external resource such as a pdf to the web page.

  • <picture> : Used to include different versions of an image for different devices.

  • <source> : Used to specify multiple media resources for the <audio>, <video>, <picture> elements.

  • Examples of the above elements and their respective outputs in browser can be found in the below HTML code and snapshots

 
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>HTML5 Basics</title> 
 <link href="wwwroot/css/styles.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <h3><code>iframe</code> element example:</h3> 
 <iframe id="inlineFrameExample" 
 title="Inline Frame Example" 
 width="300" 
 height="200" 
 src="https://www.openstreetmap.org/export/embed.html?bbox=76.9706%2C28.472%2C77.3194%2C28.655&layer=mapnik"></iframe> 
 
 <h3><code>object</code> element example:</h3> 
 <object type="application/pdf" 
 data="C:\Users\anurag.sinha\Downloads\you-don-t-know-js.pdf" 
 width="300" 
 height="200"></object> 
 <footer><a href="https://github.com/getify/You-Dont-Know-JS">PDF</a> by getify (github)</footer> 
 </body> 
</html> 

SCRIPTING

  • <canvas> : Used to draw animations and graphics in a web page.

  • <script> : Used to write or reference JavaScript code in a web page.

  • <noscript> : Used to include a relevant section to let the users know that the script type is not supported or scripting has been turned off in the browser.

  • Examples of the above elements and their respective outputs in browser can be found in the below HTML code and snapshots

 
 <h3><code>canvas</code> element example:</h3> 
 <canvas id="sampleCanvas">Your browser does not support canvas tag.</canvas> 
 <script> 
 var canvas = document.getElementById("sampleCanvas"); 
 var ctx = canvas.getContext("2d"); 
 ctx.fillStyle = "#80FF00"; 
 ctx.fillRect(0, 0, 80, 100); 
 </script> 

TABULAR CONTENT

  • <caption> : Used to specify the caption or title of the HTML table.

  • <col> : As the name suggests, used to include column in an HTML table and define common attributes to be put on all column cells.

  • <colgroup> : <col> elements are put within it.

  • <table> : Self-explanatory, used to include a table within the web page.

  • <tbody> : Body of the table.

  • <tr> : Table row.

  • <td> : Cell of an HTML table.

  • <tfoot> : Used to actually summarize all the columns of the HTML table.

  • <thead> : Used to include a head column.

  • <th> : Used within a <thead> element for individual columns.

  • Examples of the above elements and their respective outputs in browser can be found in the below HTML code and snapshots

 
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>HTML Table</title> 
 <link href="wwwroot/css/styles.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <h3><code>table</code> and other tabular elements:</h3> 
 <table border="1"> 
 <caption>Cars and their Prices.</caption> 
 <colgroup> 
 <col span="2" style="background-color:lawngreen"> 
 <col span="2" style="background-color:crimson"> 
 </colgroup> 
 <thead> 
 <tr> 
 <th>S.No.</th> 
 <th>Name</th> 
 <th>Type</th> 
 <th>Price</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>1</td> 
 <td>Hyundai i20</td> 
 <td>Hatchback</td> 
 <td>7 lacs</td> 
 </tr> 
 <tr> 
 <td>2</td> 
 <td>Honda City</td> 
 <td>Sedan</td> 
 <td>15 lacs</td> 
 </tr> 
 <tr> 
 <td>3</td> 
 <td>Toyota Fortuner</td> 
 <td>SUV</td> 
 <td>30 lacs</td> 
 </tr> 
 </tbody> 
 <tfoot> 
 <tr> 
 <td>3 items</td> 
 <td>All the cars</td> 
 <td>All the classes</td> 
 <td>A lot of money</td> 
 </tr> 
 </tfoot> 
 </table> 
 </body> 
</html> 
 

FORM CONTENT

  • <button> : Used to include a clickable button in the web page.

  • <datalist> : Sort of a dropdownlist, set of options.

  • <fieldset> : Basically a grouping element, used to group several other elements.

  • <form> :As the name suggests, used to create a form in the web page to post the data back to the server.

  • <input> : Used to accept data from the user.

  • <legend> : Used to include a caption for a <fieldset> element.

  • <meter> : Used to include a scalar/fractional value within a provided range, not to be confused with the <progress> element.

  • <optgroup> : Used to group set of options in a <select> element.

  • <output> : Used to display result of a calculation in the web page.

  • <progress> : Used to include a progress bar in the web page.

  • <select> : It is nothing but a dropdown list.

  • <textarea> : Used to include a multi-line control, so that a user can enter a comment or blog etc.

  • Examples of the above elements and their respective outputs in browser can be found in the below HTML code and snapshots

 
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>HTML Form</title> 
 <link href="wwwroot/css/styles.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <h3><code>datalist</code> element example:</h3> 
 <form> 
 <label for="car-choice">Choose a car:</label> 
 <input list="car-list" id="car-choice" name="car-choice" /> 
 <datalist id="car-list"> 
 <option value="i20"> 
 <option value="Fortuner"> 
 <option value="Beetle"> 
 <option value="Polo"> 
 <option value="Santro"> 
 </datalist> 
 <button>Click Me!!</button> 
 
 <h3><code>fieldset, legend</code> element example:</h3> 
 <fieldset> 
 <legend>Choose your favorite car manufacturing firm</legend> 
 <input type="radio" id="audi" name="car"> 
 <label for="kraken">Audi</label><br /> 
 
 <input type="radio" id="bmw" name="car"> 
 <label for="sasquatch">BMW</label><br /> 
 
 <input type="radio" id="honda" name="car"> 
 <label for="mothman">Honda</label> 
 </fieldset> 
 
 <h3><code>input</code> element example:</h3> 
 <input tyep="text" name="car" /> 
 
 <h3><code>meter</code> element example:</h3> 
 <meter value="0.4">40 %</meter> 
 
 <h3><code>optgroup, select, option</code> elements example:</h3> 
 <label for="car-select">Choose your favorite car:</label> 
 <select id="car-select"> 
 <option>Select</option> 
 <optgroup label="Sedan"> 
 <option>Honda City</option> 
 <option>Hyundai Verna</option> 
 <option>Toyota Yaris</option> 
 </optgroup> 
 <optgroup label="SUV"> 
 <option>Hyundai Creta</option> 
 <option>Renault Duster</option> 
 <option>Mahindra Scorpio</option> 
 </optgroup> 
 </select> 
 
 <h3><code>progress</code> element example:</h3> 
 <div> 
 <label for="download">Download progress</label> 
 <progress id="download" name="download" max="100" value="40"> 
 40% 
 </progress> 
 </div> 
 
 <h3><code>textarea</code> element example:</h3> 
 <textarea cols="30" rows="3">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
 
 

INTERACTIVE CONTENT

  • <details> :Creates an interactive section, which when clicked will display its information.

  • <dialog> : Used to include a dialog box in the web page.

  • <summary> : Used to include the information within a <details> element, click on the <summary> element would display the info.

  • Examples of the above elements and their respective outputs in browser can be found in the below HTML code and snapshots

 
 <h3><code>details</code> element example:</h3> 
 <details> 
 <summary>Details</summary> 
 Description of the detail. 
 </details> 
 
 <h3><code>dialog</code> element example:</h3> 
 <dialog open>This is a dialog window</dialog> 
 
 <h3><code>summary</code> element example:</h3> 
 <details> 
 <summary>What's the verdict?</summary> 
 Test Cases have passed. 
 </details> 
 

NESTED HTML ELEMENTS

HTML elements usually are nested within other elements; let’s see an example of nesting of elements. A web page usually has a structure, so that it looks beautiful and not cluttered when rendered on the browser, here nesting plays an important role.

example

To display the following text onto the browser “The quick brown fox jumps over the lazy dog”, we would write below sort of HTML code.

 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8"/> 
 <title>Nesting Example</title> 
 </head> 
 <body> 
 <p>The <b>quick brown fox</b> jumps over the <i>lazy dog</i>.</p> 
 </body> 
 </html>
 

We can see in the above code that to bring out the bold and italicized content, we have used <b> and <i> elements within the paragraph <p> element. This process of keeping elements within other or parent elements is called nesting. Even the root element <html> keeps all the other elements within itself, that’s the most basic scenario of nesting of HTML elements.

EMPTY ELEMENTS

HTML has a list of elements in which we can’t nest any other element; these are known as empty elements or void elements. These are as below

 
 <area>
 <base>
 <br>
 <col>
 <embed>
 <hr>
 <img>
 <input>
 <link>
 <meta>
 <param>
 <source>
 <track>
 <wbr>
 

HTML Attributes

In layman’s terms, an attribute may be defined as an entity which provides properties to the HTML element, which provides extra information about the element. An attribute comes in a name/value pair.

Ex : An <img> tag, has a “src” attribute which provides its filename.

 
 <img src=”/images/sample.jpg”>
 

Attributes are of 4 different types

  1. Required : Ex - “src” attribute of <img> element

  2. Optional : Ex - “class” attribute of <input> element

  3. Standard : Ex - “id”, “class”, “style” attributes of various HTML elements.

  4. Event : Ex - “onclick”, “onmouseup” attributes of various HTML elements.

Custom Attribute in HTML5

HTML5 gives us the liberty to add custom attributes to our HTML elements and perform various operations by JavaScript.These custom attributes usually start with “data-“, but are not limited to it. Let’s see an example.

 
 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8"/> 
 <title>Nesting Example</title> 
 </head> 
 <body> 
 <p>The <b>quick brown fox</b> jumps over the <i>lazy dog</i>.</p> 
 <input type="button" data-attr="btnClick" value="Submit"> 
 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
 <script> 
 $('[data-attr="btnClick"]').on('click',function() 
 { 
 console.log('Submit button was clicked'); 
 }); 
 </script> 
 </body> 
 </html>
 

In the above example, I have taken a simple button and have decorated it with a custom attribute ‘data-attr=”btnClick”’. Through this custom attribute, the click event of the button is called as shown in the jQuery code. Custom data attributes are called using square brackets [].

SUMMARY

The above article talked about the HTML tags, HTML elements, difference between an HTML tag and element. A list of complete HTML elements has been provided for further references. In the later part of the article we have talked about nesting of elements, empty/void elements, HTML attributes, custom HTML attributes and their importance.

Hands-on Learning
Free Interview Books
 
+