Skip to content

refactor: update html cheatsheet #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 22, 2022
Merged

refactor: update html cheatsheet #117

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94ec58e
refactor: update html cheatsheet
Manoj0Marmat Oct 22, 2022
3d46b3c
refactor: adding definations
Manoj0Marmat Oct 22, 2022
cb9fc33
Merge branch 'main' into newHtml
crescentpartha Oct 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 35 additions & 11 deletions CheatSheets/html-cheatsheet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
- [Basic Tags of HTML](#basic-tags-of-html)
- [Tags to Structure Document](#tags-to-structure-document)
- [Semantic Elements](#semantic-elements)
- [Formatting](#formatting)
- [Links](#links)
- [Images](#images)
- [Lists](#lists)
Expand All @@ -16,6 +17,8 @@

## Basic Tags of HTML

> Tags are like keywords which defines that how web browser will format and display the content.

| Command | Description |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `<html>...</html>` | Tag can be thought of as a parent tag for every other tag used in the page. |
Expand All @@ -41,27 +44,20 @@
| `<hr/>` | In addition to switching to the next line, this tag also drawsa horizontal bar to indicate the end of the section. |
| `<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. |
| `<cite>...</cite>` | Tag for citing author of a quote. |
| `<del>...</del>` | Pre-formatted, ‘monospace’ text laid out with whitespace inside the element intact. |
| `<ins> … </ins>` | Denotes text that has been inserted into the webpage. |
| `<blockquote> … </blockquote>` | Quotes often go into this tag. Is used in tandem with the <cite> tag. |
| `<blockquote> … </blockquote>` | Quotes often go into this tag. Is used in tandem with the `<cite>`tag. |
| `<q> … </q>` | Similar to the above tag, but for shorter quotes. |
| `<abbr> … </abbr>` | Denotes abbreviations, along with the full forms. |
| `<address> … </address>` | Tag for specifying author’s contact details. |
| `<dfn> … </dfn>` | Tag dedicated for definitions. |
| `<code> … </code>` | This is used to display code snippets within a paragraph. |
| `<sub> … </sub>` | Used for writing a subscript (smaller font just below the mid-point of normal font). |
| `<sup> … </sup>` | Similar to the above tag, but for superscripting. |
| `<small> … </small>` | Reduces text size. In HTML5, it often refers to redundant or invalid information. |
| `<strong> … </strong>` | This element indicates that its contents have strong importance or urgency. Browsers usualy render the contents in bold type. |
| `<i> … </i>` | Defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic. |
| `<bdo dir="rtl/ltr"> … </bdo>` | Overrides the current directionality of text, so that the text within is rendered in a different direction. |
| `<em> … </em>` | This tag is used to define emphasized text. The content inside is typically displayed in italic. |


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

## Semantic Elements

> Semantic element clearly describes its meaning to both the browser and the developer.

| Command | Description |
| -------------------------------- | ------------------------------------------------------------------------------------------- |
| `<article> ... </article>` | Defines independent, self-contained content |
Expand All @@ -72,18 +68,38 @@
| `<footer> ... </footer>` | Defines a footer for a document or section |
| `<header> ... </header>` | Specifies a header for a document or section |
| `<main> ... </main>` | Specifies the main content of a document |
| `<mark> ... </mark>` | Defines marked/highlighted text |
| `<nav> ... </nav>` | Defines navigation links |
| `<section> ... </section>` | Defines a section in a document |
| `<summary> ... </summary>` | Defines a visible heading for a `<details>` element |
| `<time> ... </time>` | Defines a date/time |
| `<pre> ... </pre>` | Preserve both spaces and linebreaks |

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

## Formatting

> Formatting elements were designed to display special types of text:

| Command | Description |
| ------------------------ | ---------------------------------------------------- |
| `<b> ... </b>` | Defines bold text |
| `<em> ... </em>` | Defines emphasized text |
| `<i> ... </i>` | Defines a part of text in an alternate voice or mood |
| `<small> ... </small>` | Defines smaller text |
| `<strong> ... </strong>` | Defines important text |
| `<sub> ... </sub>` | Defines subscripted text |
| `<sup> ... </sup>` | Defines superscripted text |
Comment on lines +86 to +91
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are some duplicate tags. Please, rearrange and delete the duplicate tags. Your Formatting section is looking very good. If those tags already exist, then remove the older one and rearrange them like the Formatting section. Try to check your newly added tags with the original html-cheatsheet.md file. Otherwise, creating a new conflict again.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I already removed older repeated tags please check

| `<ins> ... </i>` | Defines inserted text |
| `<del> ... </del>` | Defines deleted text |
| `<mark> ... </mark>` | Defines marked/highlighted text |

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

## Links

> Links allow users to click their way from page to page.


| Command | Description |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `<a href=””> … </a>` | Anchor tag. Primarily used for including hyperlinks. |
Expand All @@ -96,6 +112,8 @@

## Images

> Images can improve the design and the appearance of a web page.

| Command | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| `<img />` | A tag to display images in the webpage. |
Expand All @@ -115,6 +133,8 @@

## Lists

> Lists allow web developers to group a set of related items in lists.

| Command | Description |
| -------------- | ----------------------------------------------------------- |
| `<ol> … </ol>` | Tag for ordered or numbered list of items. |
Expand All @@ -128,6 +148,8 @@

## Forms

> Form is used to collect user input. The user input is most often sent to a server for processing.

| Command | Description |
| ------------------ | -------------------------------------------------------------------------------- |
| `<form> … </form>` | The parent tag for an HTML form. |
Expand All @@ -138,6 +160,8 @@

## Tables

> Tables allow web developers to arrange data into rows and columns.

| Command | Description |
| -------------------------- | ------------------------------------------------------------------ |
| `<table> … </table>` | Marks a table in a webpage. |
Expand Down