Skip to content

Commit 0a1970e

Browse files
crescentparthacrescentpartha
authored
Merge pull request #117 from Manoj0Marmat/newHtml
refactor: update html cheatsheet
2 parents cecf28f + cb9fc33 commit 0a1970e

File tree

1 file changed

+35
-11
lines changed

1 file changed

+35
-11
lines changed

‎CheatSheets/html-cheatsheet.md

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
- [Basic Tags of HTML](#basic-tags-of-html)
55
- [Tags to Structure Document](#tags-to-structure-document)
66
- [Semantic Elements](#semantic-elements)
7+
- [Formatting](#formatting)
78
- [Links](#links)
89
- [Images](#images)
910
- [Lists](#lists)
@@ -16,6 +17,8 @@
1617

1718
## Basic Tags of HTML
1819

20+
> Tags are like keywords which defines that how web browser will format and display the content.
21+
1922
| Command | Description |
2023
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
2124
| `<html>...</html>` | Tag can be thought of as a parent tag for every other tag used in the page. |
@@ -41,27 +44,20 @@
4144
| `<hr/>` | In addition to switching to the next line, this tag also drawsa horizontal bar to indicate the end of the section. |
4245
| `<strike>...</strike>` | Another old tag, this is used to draw a line atthe center of the text, so as to make it appearunimportant or no longer useful. |
4346
| `<cite>...</cite>` | Tag for citing author of a quote. |
44-
| `<del>...</del>` | Pre-formatted, ‘monospace’ text laid out with whitespace inside the element intact. |
45-
| `<ins> … </ins>` | Denotes text that has been inserted into the webpage. |
46-
| `<blockquote> … </blockquote>` | Quotes often go into this tag. Is used in tandem with the <cite> tag. |
47+
| `<blockquote> … </blockquote>` | Quotes often go into this tag. Is used in tandem with the `<cite>`tag. |
4748
| `<q> … </q>` | Similar to the above tag, but for shorter quotes. |
4849
| `<abbr> … </abbr>` | Denotes abbreviations, along with the full forms. |
4950
| `<address> … </address>` | Tag for specifying author’s contact details. |
5051
| `<dfn> … </dfn>` | Tag dedicated for definitions. |
5152
| `<code> … </code>` | This is used to display code snippets within a paragraph. |
52-
| `<sub> … </sub>` | Used for writing a subscript (smaller font just below the mid-point of normal font). |
53-
| `<sup> … </sup>` | Similar to the above tag, but for superscripting. |
54-
| `<small> … </small>` | Reduces text size. In HTML5, it often refers to redundant or invalid information. |
55-
| `<strong> … </strong>` | This element indicates that its contents have strong importance or urgency. Browsers usualy render the contents in bold type. |
56-
| `<i> … </i>` | Defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic. |
5753
| `<bdo dir="rtl/ltr"> … </bdo>` | Overrides the current directionality of text, so that the text within is rendered in a different direction. |
58-
| `<em> … </em>` | This tag is used to define emphasized text. The content inside is typically displayed in italic. |
59-
6054

6155
**[🔼Back to Top](#table-of-contents)**
6256

6357
## Semantic Elements
6458

59+
> Semantic element clearly describes its meaning to both the browser and the developer.
60+
6561
| Command | Description |
6662
| -------------------------------- | ------------------------------------------------------------------------------------------- |
6763
| `<article> ... </article>` | Defines independent, self-contained content |
@@ -72,18 +68,38 @@
7268
| `<footer> ... </footer>` | Defines a footer for a document or section |
7369
| `<header> ... </header>` | Specifies a header for a document or section |
7470
| `<main> ... </main>` | Specifies the main content of a document |
75-
| `<mark> ... </mark>` | Defines marked/highlighted text |
7671
| `<nav> ... </nav>` | Defines navigation links |
7772
| `<section> ... </section>` | Defines a section in a document |
7873
| `<summary> ... </summary>` | Defines a visible heading for a `<details>` element |
7974
| `<time> ... </time>` | Defines a date/time |
8075
| `<pre> ... </pre>` | Preserve both spaces and linebreaks |
8176

77+
**[🔼Back to Top](#table-of-contents)**
78+
79+
## Formatting
80+
81+
> Formatting elements were designed to display special types of text:
82+
83+
| Command | Description |
84+
| ------------------------ | ---------------------------------------------------- |
85+
| `<b> ... </b>` | Defines bold text |
86+
| `<em> ... </em>` | Defines emphasized text |
87+
| `<i> ... </i>` | Defines a part of text in an alternate voice or mood |
88+
| `<small> ... </small>` | Defines smaller text |
89+
| `<strong> ... </strong>` | Defines important text |
90+
| `<sub> ... </sub>` | Defines subscripted text |
91+
| `<sup> ... </sup>` | Defines superscripted text |
92+
| `<ins> ... </i>` | Defines inserted text |
93+
| `<del> ... </del>` | Defines deleted text |
94+
| `<mark> ... </mark>` | Defines marked/highlighted text |
8295

8396
**[🔼Back to Top](#table-of-contents)**
8497

8598
## Links
8699

100+
> Links allow users to click their way from page to page.
101+
102+
87103
| Command | Description |
88104
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
89105
| `<a href=””> … </a>` | Anchor tag. Primarily used for including hyperlinks. |
@@ -96,6 +112,8 @@
96112

97113
## Images
98114

115+
> Images can improve the design and the appearance of a web page.
116+
99117
| Command | Description |
100118
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
101119
| `<img />` | A tag to display images in the webpage. |
@@ -115,6 +133,8 @@
115133

116134
## Lists
117135

136+
> Lists allow web developers to group a set of related items in lists.
137+
118138
| Command | Description |
119139
| -------------- | ----------------------------------------------------------- |
120140
| `<ol> … </ol>` | Tag for ordered or numbered list of items. |
@@ -128,6 +148,8 @@
128148

129149
## Forms
130150

151+
> Form is used to collect user input. The user input is most often sent to a server for processing.
152+
131153
| Command | Description |
132154
| ------------------ | -------------------------------------------------------------------------------- |
133155
| `<form> … </form>` | The parent tag for an HTML form. |
@@ -138,6 +160,8 @@
138160

139161
## Tables
140162

163+
> Tables allow web developers to arrange data into rows and columns.
164+
141165
| Command | Description |
142166
| -------------------------- | ------------------------------------------------------------------ |
143167
| `<table> … </table>` | Marks a table in a webpage. |

0 commit comments

Comments
 (0)