HTML Cheat Sheet
HTML stands for Hyper Text Markup Language
HTML is Tag based Markup Language
HTML is interpreted by Web Browsers(such as Chrome, Edge, Firefox, etc..), to display Webpages
HTML Webpages are served(using HTTP Protocol) by a Web application running on a Web Server(such as Apache Tomcat)
HTML Tags are Case insensitive, and HTML is Platform-independent
HTML is the only direct way to display Web pages, and there is no direct alternative.
HTML is used to display static webpages, however to perform any dynamic operations on html web page, JavaScript can be used, and for Styling CSS can be used. Hence HTML, Javascript, CSS work together to display interactive, attractive web pages.
Get Suresh Kumar’s stories in your inbox
Join Medium for free to get updates from this writer.
Below are most commonly used HTML Tags
<html>
- Description: Root element of an HTML document.
- Sample Usage:
<html lang="en"> - Details: Wraps all Web page content.
<head>
- Description: Contains meta-information about the document.
- Sample Usage:
<head><title>My Page</title></head> - Details: Not displayed in the browser.
<title>
- Description: Specifies the Web Page Title in the browser.
- Sample Usage:
<title>Welcome to My Website</title> - Details: Appears in the browser tab.
<body>
- Description: Main content of the HTML document.
- Sample Usage:
<body><h1>Hello World</h1></body> - Details: Displays visible content, on Webpage
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- Description: Headings, with
<h1>as largest. - Important Attributes:
class,id. - Sample Usage:
<h1>Main Title</h1> - Details: Used for document structure.
<p>
- Description: Defines a paragraph of text.
- Important Attributes:
class,id,style. - Sample Usage:
<p>This is a paragraph.</p> - Details: <p> Tag automatically adds margin.
<a>
- Description: Creates a hyperlink to another page.
- Important Attributes:
href,target,title. - Sample Usage:
<a href="https://example.com">Visit Example</a> - Details: Anchor Tag can link to external/internal Web page.
<img>
- Description: <img> Tag embeds an image in the document.
- Important Attributes:
src,alt,width,height. - Sample Usage:
<img src="image.jpg" alt="Description"> - Details:
altprovides text for accessibility.
<div>
- Description: Generic container for grouping elements.
- Important Attributes:
class,id,style. - Sample Usage:
<div class="container">Content here</div> - Details: Used for layout and styling.
<span>
- Description: Inline container for text styling.
- Important Attributes:
class,id,style. - Sample Usage:
<span style="color:red;">Red text</span> - Details: Does not disrupt document flow.
Learn Complete Core Java with just 10$ — Limited time offer
<ul>
- Description: Defines an unordered (bulleted) list.
- Important Attributes:
type. - Sample Usage:
<ul><li>Item 1</li><li>Item 2</li></ul> - Details: Lists items in a bullet format.
<ol>
- Description: Defines an ordered (numbered) list.
- Important Attributes:
type,start. - Sample Usage:
<ol><li>First Item</li><li>Second Item</li></ol> - Details: Items are automatically numbered.
<li>
- Description: Defines a list item.
- Important Attributes:
value(for ordered lists). - Sample Usage:
<li>List item</li> - Details: Must be inside
<ul>or<ol>.
<form>
- Description: Container for input elements and submission. For example, User Registration Form
- Important Attributes:
action,method. - Sample Usage:
<form action="/submit" method="post">...</form> - Details: Handles user input.
<input>
- Description: Accepts user input in forms.
- Important Attributes:
type,name,value,placeholder. - Sample Usage:
<input type="text" name="username"> - Details: Apart from text, many other types are available, such as password, radio, checkbox, number, email, etc…).
<select>
- Description: Dropdown list for selecting options. For example, to Select a specific country, from Dropdown list of many Countries.
- Important Attributes:
name,multiple,size. - Sample Usage:
<select name="options"><option value="1">Option 1</option></select> - Details: Can include
<option>elements.
<button>
- Description: Clickable button to submit forms.
- Important Attributes:
type,name,value. - Sample Usage:
<button type="submit">Submit</button> - Details: Can also trigger JavaScript method.
<table>
- Description: Creates a table for data presentation. For example, to display List of Countries with details such as Population, GDP, etc… of each Country
- Important Attributes:
border,cellpadding,cellspacing. - Sample Usage:
<table><tr><td>Data</td></tr></table> - Details: Composed of
<tr>,<td>,<th>.
<tr>
- Description: Defines a row in a table.
- Sample Usage:
<tr><td>Row Data</td></tr> - Details: Must be inside a
<table>.
<td>
- Description: Defines a cell in a table row.
- Important Attributes:
colspan,rowspan. - Sample Usage:
<td>Cell Content</td> - Details: Contains table data.
<th>
- Description: Defines a header cell in a table.
- Important Attributes:
colspan,rowspan,scope. - Sample Usage:
<th>Header</th> - Details: Bold and centered by default.
Click here for Java Full stack(Core Java, HTML/CSS, Angular, MySQL, Spring Boot) interview questions
Other Commonly used HTML Tags:
<br> — Used for Line break, i..e to display webpage content in new line
<textarea> — To display/edit text as multiple rows and columns, for example to display/edit e-mail text
<style> — This Tag encloses CSS stlying classes
<script> — This Tag encloses Javascript methods/code
<canvas> — Canvas to display/draw text dynamically, during run time
For Selenium Developers, most commonly useful HTML attributes are id, name, class, and these attributes can be used by almost many HTML Tags
