Skip to content
Related Articles

Related Articles

HTML Cheat Sheet – A Basic Guide to HTML

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 25 May, 2022

What is HTML ?

HTML(HyperText Markup Language) is the most basic building block of all web pages. It provides structure to the content appearing on a website, such as images, text, or videos by creating a basic skeleton. HTML is still very useful today, the reason being no matter the framework, or language we use to develop the web page, the output would be rendered in HTML.

HTML Cheat Sheet

HTML Cheat Sheet

What is HTML Cheat Sheet ?

Web developers starting sometimes need a simple, quick reference list of basic HTML tags, codes, and attributes, that’s when HTML Cheat Sheet comes into the picture. The whole purpose of the Cheat Sheet is to provide you with some quick accurate ready-to-use code snippets and necessary HTML tags and attributes to help you with your webpage.

Table of Content:

Main root: The <html> element represents the root (top-level element) of an HTML document also called the document element as it defines the whole HTML document. It has a start tag <html> and an end tag </html>All other elements must be descendants of this element.

<html> … </html>

Boilerplate:

HTML




<!DOCTYPE html>
<html lang="en">
   <head>
      <!-- Description of the document -->
      <meta charset="UTF-8" />
      <title>
         <!-- title goes here -->
         Geeks For Geeks
      </title>
   </head>
   <body>
      <!-- your content goes here -->
      Welcome to Geeks for Geeks
   </body>
</html>

Sectioning Root:

Body: The HTML <body> Element represents the content of an HTML document. There can be only one <body> element in a document.

Headings: There are six headings available in HTML.

Heading TagsDescriptionSyntax
<h1>This is the largest heading among all.<h1>….</h1>
<h2>This is the second largest heading among all.<h2>….</h2>
<h3>This is the third largest heading among all.<h3>….</h3>
<h4>This is the fourth largest heading among all.<h4>….</h4>
<h5>This is the second smallest heading of all.<h5>….</h5>
<h6>This is the Smallest among all.<h6>….</h6>

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Heading Tags</title>
   </head>
   <body>
      <h1>GeeksforGeeks</h1>
      <h2>GeeksforGeeks</h2>
      <h3>GeeksforGeeks</h3>
      <h4>GeeksforGeeks</h4>
      <h5>GeeksforGeeks</h5>
      <h6>GeeksforGeeks</h6>
   </body>
</html>

Container: The container tags are tags that have some data such as text, the image between their opening and closing tags. There are several container tags in HTML.

TagsDescriptionSyntax
<div>The <div> tag is a block element. It defines a division or a section in HTML document. Any sort of content can be put inside the <div> tag.<div>… </div>
<span>The <span> tag is an inline element. It is used to mark up a part of a text, or a part of a document.<span>…</span>
<p>The <p> tag represents a paragraph. HTML paragraphs can be any structural grouping of related content, such as images or form fields.<p>…</p>
<pre>The <pre> tag represents pre-formatted text which is to be presented exactly as written in the HTML file. . It preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers.<pre>…</pre>
<code>The <code> tag is used to represent source codes. It is mainly used to display the code snippet into the web browser.<code>…</code>

HTML




<!DOCTYPE html>
<html>
<head>
   <!-- Title tag -->
   <title> GeeksforGeeks </title>
   <!-- meta tag starts -->
   <meta name="keywords" 
         content="Meta Tags, Metadata" />
   <meta name="description"
         content="Geeksforgeeks is a computer science portal." />
   <!-- meta tag ends -->
   <!-- html style tag starts -->
   <style type="text/css">
      body {
      background-color: powderblue;
      }
      h1 {
      color: black;
      font-family: arial;
      }
   </style>
   <!-- html style tag ends -->
</head>
<body>
   <p>
      GeeksforGeeks is a
      <!-- span tag starts-->
      <span style="color:red;font-weight:bolder">
      computer science</span> portal for
      <span style="background-color: lightgreen;">
          geeks
      </span>
      <!-- span tag ends -->
      <!-- html pre tag starts here -->
      <pre>
        This
        is    a pre tag.
      </pre>
   </p>
   <!-- html pre tag ends here -->
   <pre>
         <!--code Tag starts here -->
         code tag: Displays code snippets.
         <code>
         #include<stdio.h>
         int main() {
             printf("Hello Geeks");
         }
         <!--code Tag starts here -->
         </code>
   </pre>
   <p>
      Click on the following link
      <!-- link tag starts -->
      <a href="https://www.geeksforgeeks.org">
       GeeksforGeeks
      </a>
      <!-- link tag ends -->
   </p>
</body>
</html>

Document Information: This section involves tags which are used to describe the HTML document by giving an overview of what it includes.

TagsDescriptionSyntax
<head>The <head> element is a container for metadata which is data about data. It is the first section in the code containing information about a web page’s properties and links to external related files<head>…</head>
<link>The <link> tag is an empty element, it defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets on your website.<link>
<meta>The <meta> tag defines metadata about an HTML document. It is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.</meta>
<title>The <title> HTML element defines the document’s title that is shown in a browser’s title bar or a page’s tab.<title>…</title>
<style>The <style> tag is used to define style information (CSS) for a document. It is used to specify how HTML elements should render in a browser.<style>…</style>

HTML




<!DOCTYPE html>
<html>
<!-- head tag starts here -->
<head>
   <!-- title tag -->
   <title>Title goes here </title>
  
   <!-- link tag  -->
   <link rel="stylesheet" 
         type="text/css" 
         href="style.css">
  
   <!-- meta tag starts -->
   <meta name="keywords"
         content="Meta Tags, Metadata" />
   <!-- meta tag ends -->
  
   <!-- style tag starts here -->
   <style>
      #first {
      font-family: Castellar;
      background-color: green;
      color: white;
      }
      .second {
      text-align: center;
      background-color: white;
      font-size: 30px;
      color: red;
      }
   </style>
   <!-- style tag ends here -->
</head>
<!-- head tag ends here -->
<body>
    
   <p id="first">Hello GeeksforGeeks.</p>
   <p class="second">Welcome Geeks</p>
</body>
</html>

Sectioning Content:Sectioning Content elements by default define ARIA landmark. These elements are mostly descendant of HTML body element.

TagsDescriptionSyntax
<header>The <header> HTML5 element is used to give introductory content about the document. It may contain some heading elements and also a logo, a search form, an author name, and other elements.<header>… </header>
<main>The <main> HTML element represents the main dominant content of the <body> of a document. The main content area consists of content that expands upon the central topic of a document, or the main functionality of an application.<main>… </main>
<section>The HTML5 <section> element represents a standalone section. It is a structural HTML element used to group together related elements. Each <section> typically includes one or more heading elements and additional elements presenting related content.<section>… </section>
<nav>The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents<nav>…</nav>
<article>The HTML5 <article> element represents a self-contained composition in a document, page, application, or site, which is independently distributable or reusable.<article>… </article>
<aside>The <aside> tag defines some content aside from the content it is placed in. Its content should be indirectly related to the surrounding content. The <aside> content is ,most often placed as a sidebar in a document.<aside>… </aside>
<footer>The <footer> HTML element represents a footer for its sectioning root element. It typically contains information about the author of the section, copyright data or links to related documents.<footer>… </footer>
<address>The HTML <address> element indicates that the enclosed HTML provides contact information for a person or people, or for an organization. It must not contain information other than contact information.<address>..</address>

HTML




<!DOCTYPE html>
<html>
<body>
   <!-- main tag starts here -->
   <h3>HTML Header Tag</h3>
   <hr>
   <article>
      <!-- header tag starts -->
      <header>
         <h3>GeeksforGeeks Learning</h3>
         <h3> HTML nav Tag</h3>
         <!-- nav tag starts -->
         <nav>
            <a href="#">Home</a> |
            <a href="#">Interview</a> |
            <a href="#">Languages</a> |
            <a href="#">Data Structure</a> |
            <a href="#">Algorithm</a>
         </nav>
         <!-- nav tag ends -->
      </header>
      <!-- header tag ends -->
   </article>
   <main>
      <!-- HTML section tag is used here -->
      <section>
         <h1>Geeksforgeek: Section 1</h1>
         <p>Content of section </p>
      </section>
      <!-- HTML section tag ends here -->
      <!-- aside tag starts here -->
      <aside>
         <h1>This is heading text in aside Tag</h1>
         <p>This is paragraph text in aside Tag</p>
      </aside>
      <!-- aside tag ends here -->
   </main>
   <!-- main tag ends here -->
   <!--HTML footer tag starts here-->
   <footer>
      <article>
         <!-- address tag starts from here -->
         <address>
            Organization Name: GeeksforGeeks <br>
            Web Site:
            <a href="https://www.geeksforgeeks.org/about/contact-us/">
            GeeksforGeeks</a><br>
            visit us:<br>
            GeeksforGeeks<br>
            A-118, Sector 136, Noida, <br>
            Uttar Pradesh (201305)
         </address>
         <!-- address tag ends here -->
      </article>
      <br>
      <a href=
          About Us
      </a>|
      <a href=
          Privacy Policy
      </a>|
      <a href=
          Careers
      </a>
      <p>@geeksforgeeks, Some rights reserved</p>
   </footer>
   <!-- footer tag ends here -->
</body>
</html>

Text formatting and Inline text semantics: Text formatting is used in HTML to make the document look more comprehensive and attractive. The HTML inline text semantics is used to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

TagsDescriptionSyntax
<b>The <b> tag is used to make the text enclosed within these tags bold.<b>…</b>
<i>The <i> tag is used to make the style text enclosed within these tags italics.<i>…</i>
<em>The <em> tag is used to put stress on some text or show some degree of emphasis. The <em> element can be nested as well, where each level of nesting indicates a greater degree of emphasis.<em>…</em>
<strong>The <strong> tag is used to indicate that content enclosed within these tags has strong importance or urgency. Typically, browsers render their content in bold.<strong>…</strong>
<sub>The <sub> tag is used when we need to write the text as subscript.<sub>…</sub>
<sup>The <sup> tag is used when we need to write the text as superscript.<sup>…</sup>
<abbr>The <abbr> element is used to represent an abbreviation or acronym. The optional title attribute can be used to add description of the abbreviation.<abbr>… </abbr>
<mark>The <mark> tag is used to mark or highlight important text for reference or notation purposes.<mark>…</mark>
<cite>The <cite> element is used to describe the title of a creative work (For ex. a book, a paper, an essay, a poem, a song, a painting etc. )<cite>…</cite>
<time>The <time> element is used to represent a specific period of time.<time>…</time>

HTML




<!DOCTYPE html>
<html>
<head>
   <title> Geeks for Geeks </title>
</head>
<body>
   <!-- bold -->
   <div><b>Bold text</b></div>
   <!--italics  -->
   <div><i>Italics text</i></div>
   <!-- emphasis -->
   <div><em>Emphasized text</em></div>
   <!-- strong -->
   <div><strong>Important text!</strong></div>
   <!-- subscript -->
   <div>GFG<sub>subscript text</sub></div>
   <!-- superscript -->
   <div>GFG<sup>Superscript text</sup></div>
   <!-- abbreviation -->
   <div><abbr>Abbreviation</abbr></div>
   <!-- mark -->
   <div><mark>Highlighted text</mark></div>
   <!-- cite -->
   <div><cite>Title of creative work</cite></div>
   <!-- time -->
   <div>Time<time>9:00 am</time>
      to <time>7:00 pm</time>
   </div>
</body>
</html>

Lists: Lists can be either numerical, alphabetic, bullet, or other symbols. You can specify list type and list items in HTML for the clean document. There are three list types in HTML:

  • Unordered list: Used to group a set of related items in no particular order.
  • Ordered list: Used to group a set of related items in a specific order.
  • Description list: Used to display name/value pairs such as terms and definitions.
TagsDescriptionSyntax
<ul>The HTML <ul> element represents an unordered list of items. It is typically rendered as a bulleted
list.
<ul>…</ul>
<ol>The HTML <ol> element represents an ordered list of items. It is typically rendered as a numbered
list.
<ol>…</ol>
<li>The HTML <li> element is used to represent an item in a list.<li>…</li>
<dl>The HTML <dl> element represents a description list. The element encloses a list of groups of
terms (specified using the <dt> element) and descriptions.
<dl>…</dl>
<dd>The HTML <dd> tag is used in conjunction with <dl> to describe a term/name in a description list.<dd>…</dd>
<dt>The HTML <dt> element is used in conjunction with <dl> to specifies a term in a description or definition list.<dt>…</dt>

HTML




<!DOCTYPE html>
<html>
<head>
   <title>GeeksforGeeks</title>
</head>
<body>
   <h2>Welcome To GeeksforGeeks Learning</h2>
   <h5>Unordered List</h5>
   <!-- Unordered List -->
   <ul>
      <li>Data Structures & Algorithm</li>
      <li>Web Technology</li>
      <li>Aptitude & Logical Reasoning</li>
      <li>Programming Languages</li>
   </ul>
   <h5>Ordered List</h5>
   <!-- Ordered List -->
   <ol>
      <li>Array</li>
      <li>Linked List</li>
      <li>Stacks</li>
      <li>Queues</li>
      <li>Trees</li>
      <li>Graphs</li>
   </ol>
   <h5> </h5>
   <h5>Description List</h5>
   <!-- Description List -->
   <dl>
      <dt>Courses:</dt>
      <dd>100 </dd>
      <dt> Quizes:</dt>
      <dd> 500 </dd>
      <dt> Interview Experiences:</dt>
      <dd>1000 </dd>
   </dl>
</body>
</html>

Tables: A HTML table is used to arrange data in tabular form into rows and columns.

TagsDescriptionSyntax
<caption>The HTML Table Caption element specifies the title or caption of a table.<caption>…</caption>
<table>The HTML <table> element represents data in a two-dimensional table comprised of rows and columns.<table>…</table>
<thead>The HTML <thead> element is used to group header content in an HTML table. (used in conjunction with the <tbody> and <tfoot>element)<thead>…</thead>
<tbody>The HTML <tbody> element is used to group primary content of an HTML table.<tbody>…</tbody>
<th>The HTML <th> element is used to define a cell as header of a group of cells of the HTML table.<th>…</th>
<td>The HTML <td> element defines a cell of a table that contains the main data of the table.<td>…</td>
<tr>The HTML <tr> tag defines a row in an HTML table. A <tr> element contains one or more <th> or <td> elements<tr>…</tr>
<tfoot>The HTML <tfoot> element defines a set of rows summarizing the columns of the table as per requirement.<tfoot>…</tfoot>

HTML




<!DOCTYPE html>
<html>
<head>
   <title>HTML Table</title>
</head>
<body>
   <!-- table starts here -->
   <table>
      <!-- Table Caption -->
      <caption>Geeks For Geeks Learning</caption>
      <!-- Table row starts -->
      <tr>
         <!--Headers -->
         <th>Programming Languages</th>
         <th>Development</th>
         <th>Placement and Test series</th>
      </tr>
      <!-- Table row ends -->
      <tr>
         <!-- Table data -->
         <td>C programming </td>
         <td>Full stack development</td>
         <td>Google SDE preparation </td>
      </tr>
      <tr>
         <td>Java programming</td>
         <td>Backend development</td>
         <td>Flipkart SDE preparation</td>
      </tr>
      <tr>
         <td>Angular </td>
         <td>Frontend Development</td>
         <td>Amazon SDE preparation</td>
      </tr>
      <!-- Table Footer starts here -->
      <tfoot>
         <tr>
            <td>Footer content</td>
         </tr>
      </tfoot>
      <!-- Table footer ends here -->
   </table>
</body>
</html>

Forms: An HTML form is a section of a document that acts as a container for different types of input elements, such as text fields, passwords, menus, checkboxes, radio buttons, submit buttons, etc.

TagsDescriptionSyntax
<form>The <form> HTML element represents a document section containing interactive controls for submitting information.<form>…</form>
<input>The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user.<input>…</input>
<textarea>The <textarea> HTML element is used to create a multi-line plain-text editing control, often used in a form, to collect user inputs like comments or reviews.<textarea>…</textarea>
<select>The HTML <select> element represents a control that provides a menu of options to select from.<select>…</select>
<option>The <option> tag is used to define an option in a select list. The<option> elements go inside a <select>, <optgroup>, or <datalist> elements.<option>…</option>
<optgroup>The HTML <optgroup> element is used to create a grouping of options within a <select> element.<optgroup>.</optgroup>
<progress>The HTML <progress>element displays an indicator showing the degree of completion of a task, typically displayed in the form of a progress bar.<progress>…</progress>
<datalist>The HTML <datalist> element is used to give a predefined options for an <input> element. It adds an autocomplete feature to it.<datalist>…</datalist>
<button>The HTML <button> element represents a clickable button, which can be used in forms or
anywhere a standard button functionality is needed in a document.
<button>…</button>
<label>The <label> tag is used to specify a label or caption for an <input> element of a form.<label>…</label>

HTML




<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" 
         content="IE=edge">
   <meta name="viewport" 
         content="width=device-width, initial-scale=1.0">
   <title>GfG</title>
</head>
<body>
   <form>
      <fieldset>
         <legend>Personal Details</legend>
         <p>
         <p>select used here:</p>
         <!-- label starts -->
         <label>
            Salutation
            <br />
            <!-- select starts -->
            <select name="salutation">
               <option>--None--</option>
               <option>Mr.</option>
               <option>Ms.</option>
               <option>Mrs.</option>
               <option>Dr.</option>
               <option>Prof.</option>
            </select>
            <!-- select ends -->
         </label>
         <!-- label ends -->
         </p>
         <p>
            <label>First name: <input name="firstName" 
               placeholder="input element used here" /></label>
         </p>
         <p>
            <label>Last name: <input name="lastName" /></label>
         </p>
         <p>
            Gender :
            <label><input type="radio" name="gender" value="male" /> Male</label>
            <label><input type="radio" name="gender" value="female" /> Female</label>
         </p>
         <label Language preferred: </label>
         <input list="lang" placeholder="datalist used here">
         <!--datalist Tag starts here -->
         <datalist id="lang">
            <option value="java"></option>
            <option value="reactjs"></option>
            <option value="php"></option>
            <option value="python"></option>
         </datalist>
         <!--datalist Tag ends here -->
         <p>
            <label>Email:<input type="email" name="email" /></label>
         </p>
         <p>
            <label>Date of Birth:<input type="date" name="birthDate"></label>
         </p>
         <p>
            <!-- HTML address tag -->
            <label>
               Address :
               <br />
               <!--Textarea  -->
               <textarea name="address" placeholder="Textarea used here"></textarea>
            </label>
         </p>
         <p>
            <button type="submit">Submit</button>
         </p>
         <p>Progress tag used here:</p>
         Downloading progress for your profile:
         <!--HTML progress tag starts here-->
         <progress value="57" max="100" placeholder="progress tag used here">
         </progress>
         <!--HTML progress tag ends here-->
      </fieldset>
   </form>
</body>
</html>

Multimedia: Multimedia is anything you can hear or see in the form of images, videos, or sounds. It comes in various format.HTML helps you to add multimedia files to your website by providing various multimedia tags.

TagsDescriptionSyntax
<img>The HTML <img> tag is used to link images to web pages.<img />
<audio>The HTML <audio> element is used to include sound content in documents. It may contain one or more audio sources.<audio>…</audio>
<video>The HTML <video> element embeds a media player which supports video files into
the document.
<video>…</video>
<figure>The HTML <figure> tag is used to group or various diagrams, images, illustrations, and code snippets into the document.<figure>…</figure>
<figcaption>The HTML <figcaption> tag is used inside the <figure> tag to provide the caption of the content.<figcaption>…</figcaption>
<embed>The HTML<embed> tag helps embed multimedia in a Web page and play it while opening the page. It uses the three mandatory attributes, namely src, height, and width.<embed>…</embed>
<object>The HTML <object> tag is used to include objects, such as images, audios, videos, Java applets, ActiveX controls, Portable Document Format (PDF), and Flash objects, in a Web page.<object>…</object>

HTML




<!DOCTYPE html>
<html>
<body style="text-align: center;">
   <p>image here</p>
   <!-- image tag starts here-->
   <img src=
        width="420"
        height="100"
        alt="Geeksforgeeks.org">
   <!-- image tag ends here-->
   <p> Audio Sample</p>
   <!-- audio tag starts here -->
   <audio controls>
      <source src="test.mp3"
         type="audio/mp3">
      <source src="test.ogg"
         type="audio/ogg">
   </audio>
   <!-- audio tag ends here -->
   <p> Video sample</p>
   <!-- Video tag starts here -->
   <video width="400"
          height="350"
          controls>
      <source src="myvid.mp4"
              type="video/mp4">
      <source src="myvid.ogg"
              type="video/ogg">
   </video>
   <!-- Video tag ends here -->
   <p> HTML Figure here</p>
   <!--HTML figure tag starts here-->
   <figure>
      <img src=
           width="304"
           height="228"
           alt="The Pulpit Rock">
      <figcaption>Figure Caption goes here </figcaption>
   </figure>
   <!--HTML figure tag ends here-->
   <p> HTML Object here</p>
   <!--HTML object tag starts here-->
   <object data=
           width="550px"
           height="150px">
      GeeksforGeeks
      <!--HTML object tag ends here-->
   </object>
</body>
</html>

Characters and Symbols: Some characters are reserved in HTML and they have special meaning when used in HTML documents. HTML provides a wide range of characters and symbols involving arrows, currency, letters, maths, punctuation, and symbols. Some of the most commonly used ones are:

SymbolDescriptionEntity NameNumber Code
©Copyright&copy;&#169;
&Ampersand&amp;&#38;
>Greater than&gt;&#62;
<Less than&lt;&#60;
$Dollar&dollar;&#36;
Quotation mark&quot;&#34;
Apostrophe&apos;&#39;

HTML




<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Characters and Symbols</title>
</head>
<body>
   <!-- Characters and Symbols are use inside of p element -->
   <p>This is the sign of copyright: © </p>
   <p>This is the sign of trademark: ™ </p>
   <p>This is the sign of ampersand: @ </p>
   <p>This is the sign of dollar : $ </p>
   <p>This is the sign of less than : < </p>
   <p>This is the sign of greater than : > </p>
   <p>This is the sign of quotation mark : " </p>  
</body>
</html>

Attributes: HTML attributes are special words used to define the characteristics of an HTML element. These are HTML element modifiers placed inside the element’s opening tag. Attributes have two parts- the name and the value. The name is the property you want to set and the value is the desired value of the attribute.

AttributesDescriptionSyntax
altThe alt attribute is used with the image tag. It helps us to specify the alternative text in case, the image cannot be displayed on the website to give the users an idea of what the image contains.< tag_name =”…” >
hrefWe use the <a> tag to define a hyperlink. In this tag, the href attribute specifies the url of the destination address. Without href attribute <a> element will not become hyperlink.< tag_name =”…” >
srcThe HTML src Attribute is used to specify the URL of the image to be used as a submit button. It specifies the image path inside double quotes.< tag_name =”…” >
widthThe tag also contains the width attribute. As the name suggests, these attributes specify the width of the image in pixels).< tag_name =”…” >
heightThe tag also contains the height attribute. As the name suggests, these attributes specify the height of the image in pixels).< tag_name =”…” >
styleThe style attribute helps us change the look and feel of the document by setting the style, such as font, size, color, etc. of the HTML element.< tag_name =”…” >
idThe id attribute is a unique identifier that is used to specify an area of a webpage. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is used using the # symbol followed by id.< tag_name =”…” >
classThe class attribute is used to specify one or more class names for an element and assign different properties within one block which in turn can be assigned to any element. Once assigned a specific class, the elements will have all the properties of that particular class.< tag_name =”…” >
titleThe title attribute specifies extra information about an element.The text of the title attribute is most often displayed as a tooltip when the mouse hovers over the element in most browsers.< tag_name =”…” >
PlaceholderThe placeholder attribute specifies a short hint that describes the expected value of an input field/text area .The short hint is displayed in the field before the user enters a value.<tag_name placeholder=” “>

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>HTML Attributes</title>
    <style>
        #geeks {
  
            background-color: green;
            color: white;
        }
  
        .gfg {
            background-color: white;
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <!-- source attribute-->
    <div>
        <p>source attribute:</p>
        <img src=
    </div>
    <!--Alternative text: alt attribute -->
    <div> <img src=
               alt="Alternative text here"></div>
    <br>
    <!-- Link: href attribute-->
        Click to open in the same tab
    </a>
    <br>
    <a href="https://ide.geeksforgeeks.org/" target="_blank">
        Click to open in a different tab
    </a>
  
    <!-- title attribute-->
    <h2 title="GeeksforGeeks: A computer science
    portal for geeks">
        Title attribute: hover to see the effect
    </h2>
  
    <!-- Width and Height attribute-->
    <p>Using width and height attribute here:</p>
    <img src=
         width="300px"
         height="100px">
  
    <!-- id attribute-->
    <h2 id="geeks">
        Styling using id attribute here
    </h2>
  
    <!-- class attribute -->
    <h2 class="gfg">
        Styling using class attribute here
    </h2>
  
    <!-- style -->
    <h2 style="font-family:Chaparral Pro Light; ">
        Styling using style attribute here
    </h2>
  
</body>
  
</html>

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

We have a similar cheat sheet to help you with CSS concepts as well. Check it out here CSS Cheat Sheet


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!