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:
Table of Contents
ToggleAMPLet’s start the HTML cheatsheet with the basic building block of HTML, which are attributes, elements, and tags:
<tag name attribute_name=”attribute value”>Content</tag name>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> |
Body: A document’s content is represented via the HTML “body” element. A document can have just one “body” element.
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:
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> |
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> |
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> |
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:
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:
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:
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 projectAMP.
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.