Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
HTML, or Hypertext Markup Language, is the standard language used to create web pages and web applications. HTML provides a set of markup tags and attributes that define the structure and content of a web page. By using HTML, developers can create text, images, videos, forms, and other media, and define their layout and presentation on the web.
Learning HTML is a crucial first step for anyone interested in web development, as it forms the foundation upon which the rest of the web technologies, such as CSS and JavaScript, are built. With HTML, you can create basic static websites, as well as more complex dynamic web applications.
This HTML cheat sheet at OpenGenus provides a comprehensive list of all the essential HTML tags and their attributes, making it an excellent resource for both beginners and experienced developers. The cheat sheet covers everything from the basics, such as headings, paragraphs, and lists, to more advanced topics, such as tables, forms, and multimedia.
To give you an idea of what working with HTML looks like, here's an example of how to create a basic web page:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
This HTML code creates a simple web page with a heading and a paragraph of text.
If you are a beignner to HTML you would love to hear that if you place the above text in a notepad file - .txt and save it as name.html you just now created a web page. try opening the file using a browser, just double click it. Here you have it, your first Webpage!
Whether you're a beginner or an experienced developer, mastering HTML is an essential part of creating successful web projects. So, let's dive into the world of HTML and explore all the powerful tools it has to offer!
Format
Doctype Tag
declares the document type for browsers
<!DOCTYPE html>
html Tag
prime tag to start writing html file code
<html>contains all data and tags of the html file</html>
Head Tag
Container for metadata
<head>Head text</head>
example:
Head TextTitle Tag
The title of your project - present inside Head tag
<title>title text</title>
Body Tag
Container for data and context
<body>body text</body>
example:
body Textmeta Tag
specify the character set, page description, keywords, author of the document, and viewport settings for SEO
<meta />
example:
link Tag
link to external style sheets and files
<link rel="stylesheet" href="" />
example:
textstyle Tag
used to define style information for a single document - inline css
<style>/*CSS commands*/</style>
HTML Semantics
header Tag
Specifies a header for a document or section
<header>header text</header>
main Tag
Specifies the main content of a document
<main>contents</main>
footer Tag
Defines a footer for a document or section
<footer>footer text</footer>
article Tag
Defines independent, self-contained content
<article>article context</article>
navigation Tag
Defines navigation links
<nav><a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a></nav>
section Tag
Defines a section in a document
<section>section context</section>
aside Tag
Defines content aside from the page content
<aside>aside context</aside>
figure Tag
Specifies self-contained content - Embeds annotated images, illustrations, photos, code, etc.
<figure></figure>
figure Tag
For adding a caption/annotation to the figure tag
<figcaption></figcaption>
picture tag
Responsive image insertion,allows developers to provide different images for different contexts.
<picture><source></source></picture>
Image Tag
just like picture tag it ios used to add images
You can add image if it is stored in your working space like this:
```html
<img src="img_girl.jpg" width="400" height="400" />
Or you can add image directly from your browser like this:
<img
src="https://some-website-URL/opengenus.jpg"
width="400"
height="400"
/>
SVG
Container for SVG graphics
<svg src=""></svg>
video tag
For embedding videos into a website.
<video poster=" " autoplay loop controls ><source></source></video>
poster is the path to an image that’s displayed before the video plays.
example:
<video controls src="movie.mp4" type="video/mp4">Video type not supported by this browser!</video>
audio tag
For embedding audio into a website.
<audio><source></source></audio>
source tag
used to add source location in picture, audio or video tags.
<source></source>
Anchor
Link to url/a section of webpage/
<a href="url">link text</a>
<a href="#yourSection">link text</a>
to open as a new tab:
<a href="url" target="_blanl">link text</a>
Headings
Heading 1 - strongest
<h1>heading1</h1>
example:
heading1
Heading 2
<h2>heading2</h2>
example:
heading2
Heading 3
<h3>heading3</h3>
example:
heading3
Heading 4
<h4>heading4</h4>
example:
heading4
Heading 5
<h5>heading5</h5>
example:
heading5
Heading 6
<h6>heading6</h6>
example:
heading6
Font
emphasize
<em> emphaize </em>
examples: emphaize
italic
<i> italics </i>
examples: italics
bold
<b> bold </b>
examples: bold
underlined
<u> underlined </u>
examples: underlined
strong
<strong> strong </strong>
examples: strong
small
<small>small</small>
examples: small
strikethrough
<strike> striked text </strike>
examples: striked text
Break
used to break to the next line
<br />
Horizontal Ruler
used to add a horizontal ray as a devidor
<hr />
Form
Forms Tag
container to create HTML forms
<form action="" method="" target=""></form>
inputs Tag
defines input control - depending on the attribute 'type' (covered below)
<input type="" />
Label
defines a label for a form element, according to 'for' attribute
<label for=""></label>
fieldset
group related elements in a form
<fieldset></fieldset>
legend
defines caption for fieldset tag
<legend></legend>
datalist
specifies list of pre-defined options for an input tag <output></output> used to represent result of a calculation (for using this tag, you will have to use oninput attribute within form tag)
<datalist><option value="">..</option></datalist>
optgroups
used to group related options
<optgroup></optgroup>
Inputs
Text input
Defines single line text input field
<input type="text" />
Text input
defines a multiple line input field
<textarea rows="" cols=""></textarea>
number input
defines numeric input field
<input type="number" />
Password - Protected input
Defines password field
<input type="password" />
Dropdown
defines dropdown list in the form OR defines an option in the dropdown list
<select></select>
OR
<option value=""></option>
Button
Defines a clickable button
<button></button>
Checkbox input
Defines a checkbox
<input type="checkbox" />
radio input
defines a radio button
<input type="radio" />
slider input
slider control
<input type="range" />
color input
used for input fields that should contain a color
<input type="color" />
Date input
input field should contain date
<input type="date" />
Month input
select month and year
<input type="month" />
week input
select week and year
<input type="week" />
time input
select time(without timezone)
<input type="time" />
Email input
email type input field
<input type="email" />
telephone no. input
defines telephone number field
<input type="tel" />
link input
url address type input field
<input type="url" />
file input
defines file select field and browse button
<input type="file" />
image input
upload image
<input type="image" />
search bar input
define search field
<input type="search" />
reset input
defines a reset button that will reset all form values to their default values
<input type="reset" />
submit input
defines button for submitting form data
<input type="submit" />
Table
Table elements
used to create a tabular data format
<table></table> - Define a table
<tr></tr> - Define a table row
<th></th> - Define a table heading
<td></td> - Define a table data
Table implementation
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Febuary</td>
<td>$200</td>
</tr>
</table>
example:
| Month | Savings |
|---|---|
| January | $100 |
| Febuary | $200 |
Lists
List elements
<ul></ul> - Defines an unordered list
<ol></ol> - Defines an ordered list
<li></li> - Defines a list item
<dl></dl> - Defines a description list
<dt></dt> - Defines a term in a description list
<dd></dd> - Describes the term in a description list
Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
examples:
- Item 1
- Item 2
- Item 3
Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
examples:
- Item 1
- Item 2
- Item 3
Scripting Tags
Canvas Tag
Used with either the canvas scripting API or the WebGL API to draw graphics and animations.
<canvas></canvas>
noscript tag
Defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
<noscript></noscript>
Bonus:
Emojis
<p style="font-size:48px">😀 😄 😍 💗</p>
example:
😀 😄 😍 💗
With this article at OpenGenus, you must have a strong idea of different HTML tags.
