The building block of a web page is HTML (HyperText Markup Language). It establishes a fundamental framework for the material that appears on a website, such as photos, text, or videos. Before going deeper into the HTML cheatsheet lets, see what features HTML has:
- HTML features a large number of formatting tags, making it relatively simple to create an efficient display.
- Since it is a markup language, it offers a versatile approach to creating web pages in addition to the content.
- Because it may be viewed on any platform, including Windows, Linux, and Macintosh, it is platform-independent.
- It makes it easier for the programmer to include graphics, videos, and sound on the web pages, making them more engaging.
- Because HTML is case-insensitive, we can use tags in either lowercase or uppercase.
HTML Cheatsheet
Building Blocks of HTML
Let’s start the HTML cheatsheet with the basic building block of HTML, which are attributes, elements, and tags:
- HTML tags: An HTML tag encloses the content and gives it significance. It is enclosed in angular brackets (i.e. < >).
- Attributes in HTML: When placed within the start tag, an attribute in HTML offers additional details about the element. The name and value fields are both present in an HTML attribute. The syntax for an HTML attribute is:
<tag name attribute_name=”attribute value”>Content</tag name>- HTML elements: A particular part of an HTML file is called an HTML element. All text contained within tags is referred to as an HTML element in an HTML file.
Main Root
Description | Example |
| The root (top-level element) of an HTML document, sometimes known as the document element because it specifies the whole HTML page, is represented by the <html> element.
It has start and end tags that are both in the html format. This element is the only one from which all others must descend. | <!DOCTYPE html>
<html> <head> <title>HTML Page</title> </head> <body>Hi, there!!</body> </html> |
Sectioning Root
Body: A document’s content is represented via the HTML “body” element. A document can have just one “body” element.
Headings Tags
To provide different sizes of headings in a document, HTML provides six heading tags and these are:
Heading Tag | Description | Syntax |
| <h1> | The largest size of heading is displayed using the <h1> tag. | <h1>Hey</h1> |
| <h2> | The second largest heading is displayed by using the <h2> tag. | <h2>Hey</h2> |
| <h3> | The third largest heading is displayed by using the <h3> tag. | <h3>Hey</h3> |
| <h4> | The fourth largest heading is displayed by using the <h4> tag. | <h4>Hey</h4> |
| <h5> | The fifth largest heading is displayed by using the <h5> tag. | <h5>Hey</h5> |
| <h6> | The smallest size of heading is displayed by using the <h6> tag. | <h6>Hey</h6> |
Example:
<!DOCTYPE html> <html> <body> <h1>Hii, there</h1> <h2>Hii, there</h2> <h3>Hii, there</h3> <h4>Hii, there</h4> <h5>Hii, there</h5> <h6>Hii, there</h6> </body> </html>
Output:
Container
Between its opening and closing tags, container tags hold data, such as text or images. In HTML, there are numerous container tags.
Tags | Description | Syntax |
| <span> | It is an inline element that is used to highlight a certain passage of text or section of a document. | <span>….</span> |
| <div> | It describes a split or part in an HTML document. The div tag is open to all types of content. It is a block element. | <div>….</div> |
| <pre> | Pre-formatted text is represented by the <pre> element and is intended to be displayed precisely as it is there in the HTML file. It keeps text formatting elements like tabs, line breaks, and spaces that web browsers ignore. | <pre>…..</pre> |
| <p> | The paragraph is represented by the tag <p>. Any structural collection of related content, such as images or form fields, can be grouped into an HTML paragraph. | <p>…..</p> |
| <code> | Source codes are shown using the <code> tag. It mostly serves as a means of displaying code snippets in web browsers. | <code>…</code> |
Document Information
In this section, tags are used to summarize the contents of the HTML text and describe it.
Tags | Description | Syntax |
| <head> | This tag serves as a container for metadata. It is the first portion of code that contains details about a web page’s attributes and connections to related external files. | <head>….</head> |
| <title> | The title of the document that appears in a browser’s title bar or on a page’s tab is defined by the <title> tag. | <title>….</title> |
| <link> | This tag is an empty element, it describes the connection between the currently open document and an outside resource. On your website, external style sheets are most frequently linked using the <link> tag. | <link> |
| <meta> | In an HTML document, the “meta” tag defines metadata. Character set, page description, keywords, document author, and viewport settings are some of the usual things specified in it. | <meta/> |
| <style> | Style information (CSS) for a document is defined using the <style> tag. It is employed to indicate how HTML elements ought to appear in a browser. | <style>…..</style> |
Text Formatting and Inline Text Semantics
In order to make the page appear more thorough and appealing, HTML uses text formatting. The semantics of an individual word, line, or any other piece of text can be defined using the HTML inline text semantics. Different HTML tags used for text formatting are:
Tags | Description | Syntax |
| <i> | The style text included within these tags is italicized using this tag. | <i>…</i> |
| <b> | The content included within these tags is made bold by using the <b> tag. | <b>….</b> |
| <strong> | Important text is defined using the <strong> tag. | <strong…..</strong> |
| <em> | When you want to emphasize a passage of text, use the <em> tag. | <em>…..</em> |
| <sub> | This tag is used to write text as subscripts like chemical formulas such as H2O and CO2 can be written using the <sub> tag. | H<sub>.2</sub>O |
| <sup> | To write something as superscripts, like a2+b2, you can use the <sup> tag. | a<sup>2</sup> |
| <mark> | For reference or note reasons, the <mark> tag is used to highlight or mark up key material. | <mark>….</mark> |
| <time> | To display a particular time period, the <time> tag is used. | <time>…</time> |
Table Tags
The rows and columns of tabular data are organized using an HTML table. The following table explains the various table tags in HTML:
Tags | Description |
| <table> | To display data in rows and columns, the table tag is used. |
| <caption> | This tag is used to display the table title. |
| <thead> | In an HTML table, it specifies the header. The tbody> and tfoot> tags are also used with it. |
| <tbody> | Content of the HTML table is defined within the <tbody>tag. |
| <th> | It specifies the HTML table’s head cell. |
| <td> | An HTML table’s cells that carry table data are defined using it. |
| <tfoot> | It specifies the HTML table’s footer content. |
| <tr> | In an HTML table, the row cells are defined. |
Example:
Output:
List
Numbers, letters, bullets, or other symbols can be used in lists. In HTML, list elements and types can be specified for a tidy document. In HTML, there are three different list types:
- Ordered List: It is used to arrange a group of related objects in a particular order.
- Unordered List: This type of list assembles a collection of related elements in a group, i.e. it does not follow any specific order.
- Description List: It is used to show name/value pairings, such as words and definitions.
Tags | Description |
| <ol> | An ordered list of things is represented by the HTML “or” element. Usually, it appears as a numbered list. |
| <li> | An item in a list is represented by the HTML li element. |
| <ul> | An unordered list of items is represented by the <ul> HTML element. It is often presented as a list with bullets. |
| <dl> | A description list is represented by the HTML element dl. The element contains a list of descriptions and term groups (given by the <dt> element). |
| <dd> | A term or name in a description list can be described using the HTML dd and dl tags. |
| <dt> | To specify a term in a description or definition list, use the HTML dt and dl elements together. |
Example:
Output:
Conclusion
In this HTML cheatsheet, we discussed the various tags, components, and properties used by developers. While not all-inclusive, this cheatsheet can be used as an excellent starting point for beginners who have just started learning HTML as well as for those who are stuck somewhere with an HTML project.
Since HTML is the basic language to start with front-end development, one should start with HTML to build a career as a web developer.
An enthusiastic computer science engineer with experience working in Java applications. Skilled in C++, basics of Machine Learning, solving real-world problems, and passionate about learning new technologies. I also develop technical content to share knowledge and provide learning content.