Table of Content
Main root
The <html> element represents the root (top-level element) of an HTML document also called the document element. 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>
Headings
HTML heading tags (<h1> to <h6>) are used to define headings and subheadings on your webpage.
The <h1> tag is typically reserved for the page’s main title, while the others denote subheadings in descending order of importance.
| Heading Tags | Description | Syntax |
| <h1> | Used for title generally once per page and has a font size of 2em. | <h1>….</h1> |
| <h2> | Used for medium sized titles and has a font size of 1.5em. | <h2>….</h2> |
| <h3> | Used for subsections and has a font size of 1.17em. | <h3>….</h3> |
| <h4> | Used for highlighting text with font size of 1em. | <h4>….</h4> |
| <h5> | Fifth level heading with font size of .83em. | <h5>….</h5> |
| <h6> | Displays least significant details and has a font size of .67em | <h6>….</h6> |
<!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
Container tags in HTML are used to group other elements together. They provide a way to structure your HTML and apply styles to multiple elements at once. The several container tags in HTML are:
| Tags | Description | Syntax |
| <div> | Block element that defines a division in HTML document. | <div>… </div> |
| <span> | Inline element used to mark up a part of a text or document. | <span>…</span> |
| <p> | Used to represent a paragraph. | <p>…</p> |
| <pre> | Represents pre-formatted text to present exactly as written in the HTML file. | <pre>…</pre> |
| <code> | Used to represent source codes | <code>…</code> |
<!DOCTYPE html>
<html>
<head>
<title> GeeksforGeeks </title>
<meta name="keywords" content="Meta Tags, Metadata" />
<meta name="description" content="Geeksforgeeks is a computer science portal." />
<style type="text/css">
body {
background-color: powderblue;
}
h1 {
color: black;
font-family: arial;
}
</style>
</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 -->
<!-- pre tag starts here -->
<pre>
This
is a pre tag.
</pre>
</p>
<!-- html pre tag ends here -->
<!--code Tag starts here -->
code tag: Displays code snippets.
<code>
#include<stdio.h>
int main() {
printf("Hello Geeks");
}
<!--code Tag ends here -->
</code>
<p>
Click on the following link
<!-- anchor tag starts -->
<a href="https://www.geeksforgeeks.org">
GeeksforGeeks
</a>
<!-- anchor tag ends -->
</p>
</body>
</html>
Document Information
This section encompasses HTML tags that provide a comprehensive summary of the content within the HTML document. These tags offer a snapshot of what the document contains, enhancing the understanding of its structure and content.
| Tags | Description | Syntax |
| <head> | Container for metadata which is data about data. | <head>…</head> |
| <link> | Used to link external style sheets or documents. | <link> |
| <meta> | Defines metadata about HTML document. | <meta/> |
| <title> | Defines the document’s title | <title>…</title> |
| <style> | Used to define style information (CSS) for a document. | <style>…</style> |
<!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>
Semantic Element
Semantic Element in HTML are elements that clearly describe their meaning in terms of content and function, both to the browser and the developer.
| Tags | Description | Syntax |
| <header> | Used to give introductory content about the document. | <header>… </header> |
| <main> | Represents the main dominant content of a document. | <main>… </main> |
| <section> | Structural HTML element used to group together related elements. | <section>… </section> |
| <nav> | Represents a section of a page to provide navigation links | <nav>…</nav> |
| <article> | Represents a self-contained composition which is independently distributable or reusable. | <article>… </article> |
| <aside> | Defines some content aside from the content it is placed in. | <aside>… </aside> |
| <footer> | Represents a footer for its sectioning root element | <footer>… </footer> |
| <address> | Provides contact information for a person, people, or an organization. | <address>..</address> |
<!DOCTYPE html>
<html>
<body>
<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 tag starts here -->
<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="https://www.geeksforgeeks.org/about/">
About Us
</a>|
<a href="https://www.geeksforgeeks.org/privacy-policy/">
Privacy Policy
</a>|
<a href="https://www.geeksforgeeks.org/careers/">
Careers
</a>
<p>@geeksforgeeks, Some rights reserved</p>
</footer>
<!-- footer tag ends here -->
</body>
</html>
Text Formatting and Inline Text Semantics
Text formatting tags in HTML, are used to format text in different ways, like making text bold, italicized, or monospaced. The HTML inline text semantics is used to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
| Tags | Description | Syntax |
| <em> | Used to put stress on some text or show some degree of emphasis. | <em>…</em> |
| <strong> | Indicates that the content has strong importance. | <strong>…</strong> |
| <sub> | Writes the text as subscript. | <sub>…</sub> |
| <sup> | Writes the text as superscript. | <sup>…</sup> |
| <abbr> | Represents an abbreviation or acronym. | <abbr>… </abbr> |
| <mark> | Highlights important text for reference or notation purposes. | <mark>…</mark> |
| <cite> | Describes the title of a creative work. | <cite>…</cite> |
| <time> | Used to represent a specific period of time. | <time>…</time> |
<!DOCTYPE html>
<html>
<head>
<title> Geeks for Geeks </title>
</head>
<body>
<!-- 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
List tags in HTML, including <ul>, <ol>, and <li>, are used to create different types of lists. It can be either numerical, alphabetic, bullet, or other symbols. 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.
| Tags | Description | Syntax |
| <ul> | Represents an unordered list of items list. | <ul>…</ul> |
| <ol> | The HTML <ol> element represents an ordered list of items. | <ol>…</ol> |
| <li> | Represents an item in a list. | <li>…</li> |
| <dl> | Represents a description list. | <dl>…</dl> |
| <dd> | Used to describe a term/name in a description list. | <dd>…</dd> |
| <dt> | Specifies a term in a description. | <dt>…</dt> |
<!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>
</ul>
<h5>Ordered List</h5>
<!-- Ordered List -->
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
</ol>
<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
Table tags in HTML, such as <table>, <tr>, <td>, and <th>, are used to create and structure tables in HTML. They allow you to present data in rows and columns.
| Tags | Description | Syntax |
| <caption> | Specifies caption of a table. | <caption>…</caption> |
| <table> | Represents data in a two-dimensional table. | <table>…</table> |
| <thead> | Used to provide a header to the group of content in an HTML table | <thead>…</thead> |
| <tbody> | Used to group primary content of an HTML table. | <tbody>…</tbody> |
| <th> | Defines a cell as header of a group of cells of the table. | <th>…</th> |
| <td> | Defines a cell of a table. | <td>…</td> |
| <tr> | Defines a row in an HTML table. | <tr>…</tr> |
| <tfoot> | Defines a set of rows summarizing the columns of the table. | <tfoot>…</tfoot> |
<!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>
</tr>
<!-- Table row ends -->
<tr>
<!-- Table data -->
<td>C programming </td>
<td>Full stack development</td>
</tr>
<tr>
<td>Java programming</td>
<td>Backend development</td>
</tr>
<tr>
<td>Angular </td>
<td>Frontend Development</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.
Generally, Form tags in HTML, like <form>, <input>, <textarea>, and <button>, are used to create forms for user input.
| Tags | Description | Syntax |
| <form> | Represents a section containing controls for submitting information. | <form>…</form> |
| <input> | Creates interactive controls for forms to accept data. | <input>…</input> |
| <textarea> | Create a multi-line plain-text editing control | <textarea>…</textarea> |
| <select> | Represents a control that provides a menu of options to select from. | <select>…</select> |
| <option> | Defines an option in a select list. | <option>…</option> |
| <optgroup> | Creates a grouping of options within a <select> element. | <optgroup>.</optgroup> |
| <progress> | Displays an indicator showing the degree of completion of a task. | <progress>…</progress> |
| <datalist> | Used to give predefined options for an <input> element and adds an autocomplete feature to it. | <datalist>…</datalist> |
| <button> | Represents a clickable button. | <button>…</button> |
| <label> | Specifies a label for an <input> element. | <label>…</label> |
<!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>
</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