List of content you will read in this article:
The common building block of all pages on the internet is the Hypertext Markup Language or HTML. Consider this language as the skeleton that holds your webpage together. You put pictures, videos, and more on your webpage without messing things up. You can learn the cheat sheet of HTML in no time if you keep reading. And trust me, this will come in handy in the future.
The HTML Cheat Sheet
As you would expect, the list of things you have got to know is long, but learning them is necessary. Let’s start learning HTML’s first stepping stone, the headings.
Headings
The headings don’t need any introduction since the functionality is the same as Microsoft Word.
<h1>
Description: Use this for the first heading of your text.
Syntax: <h1>….</h1>
<h2 class="link-id">
Description: Use this for the second heading of your text.
Syntax: <h2 class="link-id">….</h2 class="link-id">
<h3>
Description: Use this for the third heading of your text.
Syntax: <h3>….</h3>
<h4>
Description: Use this for the fourth heading of your text.
Syntax: <h4>….</h4>
<h5>
Description: Use this for the fifth heading of your text.
Syntax: <h5>….</h5>
<h6>
Description: Use this for the sixth heading of your text.
Syntax: <h6>….</h6>
Container
The container elements include different data types and are considered the building blocks of any webpage.
<div>
Description: The div tag in HTML helps you define sections or divisions of your document. The type of content doesn’t matter since the div tag supports all content formats.
Syntax: <div>… </div>
<span>
Description: The span tag is commonly used to mark up parts of text or parts of documents in general.
Syntax: <span>…</span>
<p>
Description: The p tag is used for paragraphs. The HTML allows you to group any related documents as a paragraph.
Syntax: <p>…</p>
<pre>
Description: The pre-tag is used to show texts at the pre-format stage. This tag will preserve different attributes, such as line breaks and text spaces usually ignored by browsers.
Syntax: <pre>…</pre>
<code>
Description: The code tag is used to show source codes. One of its main uses is displaying code snippets to the browser.
Syntax: <code>…</code>
Document Information
The document information tags help google understand what is on your webpage and how it should look on browsers.
<head>
Description: The head element contains the metadata of your webpage. It comes at the beginning of your code and has all the information related to your page, including its external links.
Syntax: <head>…</head>
<link>
Description: The link tag defines the current document’s and an external source’s relationship. This tag also allows you to link style sheets to a website.
Syntax: <link>
<meta>
Description: The meta tag defines the metadata on HTML documents. Its common uses are specifying keywords, page descriptions, character sets, and authors.
Syntax: </meta>
<title>
Description: The title tag is used to define the title of a document. This title is shown in a page’s tab.
Syntax: <title>…</title>
<style>
Description: The style tag defines the style information of a document. Use this tag to specify how you want the HTML elements rendered.
Syntax: <style>…</style>
Sectioning Content
As the name suggests, you can use these tags to sectionalize your webpage’s content.
<header>
Description: The header tag gives some introductory info about documents. This tag can include heading elements, a search form, and other elements.
Syntax: <header>… </header>
<main>
Description: The main tag defines the primary content of a document’s body paragraphs. The “primary content” is the content that is an expansion on the main topic or keyword of a document.
Syntax: <main>… </main>
<section>
Description: The section tag defines different separate sections. This structural tag groups related elements together. Remember that each section contains at least one heading and other related HTML elements.
Syntax: <section>… </section>
<nav>
Description: The nav tag defines different sections that have navigation links either inside the document or links to external sources.
Syntax: <nav>…</nav>
<article>
Description: The article tag defines isolated compositions in a document. These “isolated compositions” can be used independently.
Syntax: <article>… </article>
<aside>
Description: The aside tag separates content from its surrounding content. When using this tag, make sure the content is indirectly related to the rest of the content. The common use for this content is in a document’s sidebar.
Syntax: <aside>… </aside>
<footer>
Description: The footer tag is used for sectioning apart the root elements. This tag usually contains information about the section’s author or copyright information.
Syntax: <footer>… </footer>
<address>
Description: The address tag is used for sections including contact info. The enclosed HTML that uses the address tag should not have anything else than contact information.
Syntax: <address>...</address>
Text Formatting and Inline Semantics
These tags make your webpage’s text more stylish and visually attractive.
<b>
Description: The b tag makes any text within the tag bold.
Syntax: <b>…</b>
<i>
Description: The i tag is a text style that makes any text within the tag italic.
Syntax: <i>…</i>
<em>
Description: The em tag emphasizes any text that’s within the tag. This tag can also do Nesting. And each level of Nesting shows a bigger emphasis.
Syntax: <em>…</em>
<strong>
Description: The strong tag indicates that the content within the tags is important. Usually, browsers show their content in bold.
Syntax: <strong>…</strong>
<sub>
Description: The subtag is used to write the text on a webpage as a subscript.
Syntax: <sub>…</sub>
<sup>
Description: The sup tag is used to write the text on a webpage as superscript.
Syntax: <sup>…</sup>
<abbr>
Description: The abbr element is used to show abbreviations or acronyms. You can also see the description of the abbreviation using the optional title.
Syntax: <abbr>… </abbr>
<mark>
Description: The mark tag is used to highlight important text on a webpage for referencing purposes.
Syntax: <mark>…</mark>
<cite>
Description: The cite tag is used to describe the title of a document.
Syntax: <cite>…</cite>
<time>
Description: The time tag is used to show a certain period.
Syntax: <time>…</time>
Lists
In HTML documents, you have to define your list type and content; these tags help you do so.
<ul>
Description: The HTML ul tag shows a list of unordered items. It is usually shown as a bulleted list.
Syntax: <ul>…</ul>
<ol>
Description: The HTML ol tag shows a list of ordered items. It is usually shown as a numbered list.
Syntax: <ol>…</ol>
<li>
Description: The HTML li tag shows a specific item in a list.
Syntax: <li>…</li>
<dl>
Description: The HTML dl tag shows a description list. The tag encloses a list of terms and descriptions as a group.
Syntax: <dl>…</dl>
<dd>
Description: The HTML dd element is used with dl to describe a term in a descriptive list.
Syntax: <dd>…</dd>
<dt>
Description: The HTML dt tag is used with dl to specify a term in a description or a definition list.
Syntax: <dt>…</dt>
Tables
Use tables to put your webpage’s data into tables to make it more visually attractive.
<caption>
Description: The HTML Caption tag defines the title of your table.
Syntax: <caption>..<caption>
<table>
Description: The HTML table tag represents the content in a 2D table consisting of several rows and columns.
Syntax: <table>..<table>
<thead>
Description: the thead tag groups header content in HTML tables. This tag is usually used with the tbody and tfoot tags.
Syntax: <thead>..<thead>
<tbody>
Description: the tbody tag groups the primary content of HTML tables.
Syntax: <tbody>..<tbody>
<th>
Description: By using the th tag, you can set a certain cell as the header of a group of cells.
Syntax: <th>..<th>
<td>
Description: the td tag is used to define the cell containing the primary data of an article.
Syntax: <td>..<td>
<tr>
Description: the tr tag is used to define rows in HTML tables. This tag also contains at least one th or td tag.
Syntax: <tr>..<tr>
<tfoot>
Description: the tfoot tag defines rows and summarises the table’s columns based on said rows.
Syntax: <tfoot>..<tfoot>
Forms
These tags define and create input fields for passwords and similar information.
<form>
Description: the form tag defines the section with interactive controls for entering information.
Syntax: <form>…</form>
<input>
Description: the input tag creates interactive controls for any web-based form to get users' data to enter.
Syntax: <input>..<input>
<textarea>
Description: The textarea tag creates a multi-line editing control that collects user input, such as comments.
Syntax: <textarea>..<textarea>
<select>
Description: The select tag is used to make a list of options that users can select from.
Syntax: <select>..<select>
<option>
Description: The option tag is used to single out an option from a list. This tag is also used inside the select, optgroup, and datalist tags.
Syntax: <option>…</option>
<optgroup>
Description: The optgroup tag groups different options together in the select tag.
Syntax: <optgroup>…<optgroup>
<progress>
Description: The progress tag shows the progress of a task in the form of a bar.
Syntax: <progress>..<progress>
<datalist>
Description: The datalist tag gives you predefined options for your input tag. Additionally, it will add an autocomplete feature to it.
Syntax: <datalist>..<datalist>
<button>
Description: The button tag shows a clickable button on the screen. This button can be used wherever a button functionality is needed.
Syntax: <button>..<button>
<label>
Description: The label tag specifies labels or captions for the input tag in a document.
Syntax: <label>..<label>
Multimedia
These tags will help you upload audio files, images, and videos into your document.
<img>
Description: The img tag links images in a document to web pages.
Syntax: <img>
<audio>
Description: The audio tag puts sound files in an HTML document. The sound files can be more than one.
Syntax: <audio>..<audio>
<video>
Description: The video tag embeds your chosen media player into an HTML document.
Syntax: <video>..<video>
<figure>
Description: The figure tag groups images, diagrams, code snippets, etc., into your HTML document.
Syntax: <figure>..<figure>
<figcaption>
Description: The figcaption is used to specify the content’s caption. This tag is used inside the figure tag.
Syntax: <figcaption>..<figcaption>
<embed>
Description: The embed tag embeds and plays the multimedia in a webpage soon as you open the page. The three attributes it uses are src, height, and width.
Syntax: <embed>..<embed>
<object>
Description: The object tag includes images, videos, audio, PDFs, ActiveX controls, and Java applets in an HTML document.
Syntax: <object>..<object>
Attributes
Use these tags in your HTML document’s opening tags to define the characteristics of your elements.
alt
Description: The alt attribute specifies the alt text when the image can’t be loaded. The alt text tells readers what the image contains. This attribute is used with the image tag.
Syntax: < tagname =”..” >
href
Description: The href attribute is used with the “a” tag. Href defines the address’ URL. Remember that without this attribute, the URL will not become a hyperlink.
Syntax: < tagname =”..” >
src
Description: The src attribute specifies an image’s URL to be used as a submission button. The image path will be included in quotation marks.
Syntax: < tagname =”..” >
width
Description: The width tag, you guessed it, is used to define the width of an image in pixels.
Syntax: < tagname =”..” >
height
Description: Like the width tag, the height tag specifies an image’s height in pixels.
Syntax: < tagname =”..” >
style
Description: This attribute changes the style of a document, whether it’s the font, color, or size of an element.
Syntax: < tagname =”..” >
id
Description: The id attribute specifies a specific area of a webpage. This attribute is used in CSS and JavaScript to do a specific task for a specific element.
Syntax: < tagname =”..” >
class
Description: This attribute specifies class names for elements and assigns them properties within one block. After you assign a specific class to an element, it will have the properties of that class.
Syntax: < tagname =”..” >
title
Description: This attribute is used to give extra information about elements. The title you set for it is shown as a tooltip as your mouse hovers over an element.
Syntax: < tagname =”..” >
Placeholder
Description: The placeholder attribute is the short hint you get before entering a field value.
Syntax: <tagname placeholder=”..”>
Conclusion
HTML is the common building block of all web pages. This has made HTML widely used, and knowing it has become a must for web developers. The tags in HTML allow you to perform various tasks and make your webpage look how you want it to. You can use tables to make your data more organized. You can also use the Attribute tags to make your elements look as visually attractive as possible. The possibilities are endless with HTML, which is why you must learn it asap.
People also read:
I'm fascinated by the IT world and how the 1's and 0's work. While I venture into the world of Technology, I try to share what I know in the simplest way with you. Not a fan of coffee, a travel addict, and a self-accredited 'master chef'.