# HTML Cheat Sheet | Become A Pro ⭐

**URL:** <https://onehack.st/t/html-cheat-sheet-become-a-pro/234580>\
**Category:** Tutorials & Methods\
**Tags:** programming, freebies, tips-tricks\
**Created:** [March 18, 2023, 2:22pm UTC](https://onehack.st/t/html-cheat-sheet-become-a-pro/234580 "2023-03-18T14:22:42Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![PlayBoy83](https://onehack.st/user_avatar/onehack.st/playboy83/32/164314_2.png) [@PlayBoy83](https://onehack.st/u/PlayBoy83)\
**Post date:** [March 18, 2023, 2:22pm UTC](https://onehack.st/t/html-cheat-sheet-become-a-pro/234580/1 "2023-03-18T14:22:42Z")

</div>

![image](https://onehack.st/uploads/default/original/3X/d/a/da5840397368e5035b4110563182b15aaed01b2d.jpeg)

HTML Cheat Sheet | Become A Pro

## **HTML stands for Hyper Text Mark-up Language**

Used for: creating [web pages](https://en.wikipedia.org/wiki/Web_page) (documents) that are displayed on the [World Wide Web](https://en.wikipedia.org/wiki/World_Wide_Web) (websites). The pages can be a mix of text, images, videos, and other elements. It can be created with: notepad, TextPad or any text editors.

Saved as: .html files

## HTML Cheat Sheet

Here we are sharing with you the complete HTML Cheat Sheet:

### Basic structure
 body tags and main content 

The main elements in HTML are the tags. Tags structure and present the data in different forms.

### Heading

```auto
<h1>Heading 1</h1>
<h2>Heading 2 </h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 </h6>

```

### Paragraph

```auto
<p>write a paragraph</p>
Attribute ‘style’ can be used with <p> to display the text inside <p> in a specific manner. For example,
<p style = "color:blue">I will appear blue</p>
<p style = "background-color:blue">Highlighting as blue</p>
<br> line break

```

### Span

Span tag is used for styling inline elements.

```auto
<span style = “color:green”> Address </span>

```

`- prints the word ‘Address’ in the specified color (here green). The style attribute is used to style HTML elements.`

### Characters

- `&nbsp;` – space (non-breaking)
- `&quot;` - add quotation mark (“)
- `&lt;` - less than symbol (\<)
- `&gt;` - greater than symbol (\>)
- `&amp;` - the ‘&’ or ampersand symbol
- `&copy;` - copyright symbol
- `&trade;` - trademark symbol

### Formatting

- `<b>Bold text </b>`
- `<i>*Italic text*</i>`
- `<u>*underlined text*</u>`
- `<mark>I am highlighted in yellow</mark>- marks the text in yellow. If other colors are needed, span is used.`
- `<span style="background-color: #FF00FF">I am highlighted in pink</span>`
- `<strong>I am strong</strong> - give emphasis to a particular text; mostly bold`
- `<font></font> - chosen font for the text`
- `Font is not used in HTML 5, CSS is used. Attributes of <font> -`
- `<face> - the font family, for example Courier New`
- `<size> - size of the text`
- `<color> - color of the text in hex value (eg. #FF000F) or text (eg.red)`
- `<small></small> - smaller text, fine print size`
- `<strike>Strike that out</strike> - strikeout the text inside the tag`
- `<sup></sup> - superscript (text above the normal text like exponential numbers)`
- `<sub></sub> - subscript`
- `<em></em> - emphasis`
- `<pre></pre> - preformatted text`
- `<tt></tt> - typewriter text`

### Body

`<body>` - the main content lies in the body. Inside there can be many sections. **Attributes –**

- **background=“” -** Background Image source; can be left empty if no image
- **bgcolor=“” -** Background Colour in hex value
- **text=“” -** page text color
- **link=“” -** Link Colour
- **alink=“” -** Active (current) Link Colour
- **vlink=“” -** Visited Link Colour
- **bgproperties=“” -** Background Properties. A value of “fixed” means non-scrolling watermark
- **topmargin=“?” -** Top Margin Size in Pixels
- **leftmargin=“” -** Side Margin Size in Pixels

### Metadata

`<meta>` tag is a part of and describes information about data. Most common use of metadata is by search engines for keywords. **-** most common character set **Attributes –**

- **name = “” –** can be name like keyword, author, description etc…
- **content = “” –** the value corresponding to above names

**Example -** `<meta name="keywords" content="What is HTML, How to learn HTML">`

### Sections and divisions

- `<div></div> new section; nested div tags are very common when multiple sub-sections are required`
- `<hr> - horizontal line`

`<hr> has the following attributes –`

```auto
<hr size = “” width = “”/width = “%” color = “” align = “left/center/right”>
size – thickness of the line in pixels
width – in pixels or percentage (any one)
color – color in hex value
align – alignment; left, right or center

```

### Tables

```auto
<table>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
</table>

```

```auto
<table> - creates a table,
<tr> - creates a row,
<td> - creates column,
<th> - creates header columns

```

`<table>` **attributes –**

- **border=“” -** Thickness of outside border in pixels
- **bordercolor=“” -** Border Colour in hex value
- **cellspacing=“” -** Space between each cell in pixels
- **cellpadding=“” -** Space between cell border and content
- **align=“” -** Horizontal Alignment; left, right, center
- **bgcolor=“” -** Background Colour hex value
- **width=“” -** Table Width in pixels or %
- **height=“” -** Table Height in pixels or %

`<td>` **attributes**

- **colspan=“” -** Number of columns the cell spans across
- **rowspan=“” -** Number of rows cell spans across
- **width=“” -** width of cell in pixels or %
- **height=“” -** height of cell in pixels or %
- **bgcolor=“” –** hex value of background colour for the cell (column)
- **align=“” -** Horizontal Align; left, center, right
- **valign=“” -** Vertical Align; top, middle, bottom
- **- i** s used to define attributes for particular columns of the table.

**Example –**

```auto
<colgroup>
 <col span="1" style="background-color:green">
 <col style="background-color:blue">
</colgroup>

```

The first column will be highlighted as green, whereas other columns will be highlighted as blue.

### Forms (HTML Cheat Sheet)

Most of the dynamic content like user inputs, submitting a page, filling a form happen inside this tag. It is a group of related inputs.

```auto
<form>
 <input>
 <select><option></option></select>
 <textarea>
</form>

```

`<form>` **tag attributes –**

- **action=“url” -** destination url upon form submission
- **method=“” -** form method - get, post
- **enctype=“” -** type of encoding; for file upload it is “multipart/form-data”

`<input>` **tag attributes –**

- **type=“” -** Mandatory input Field Type: text, password, checkbox, submit and so on.
- **name=“” -** Form Field Name (mandatory for form processing)
- **value=“” -** value (entered by user) or default value
- **size=“” -** field size
- **maxlength=“” -** Maximum acceptable length of Input Field data
- **checked -** Mark selected field in checkbox (multi-select) or radio button (single-select)

`<select> </select>` **- Select options from drop-down list** `<select>` **tag Attributes:**

- **name=“” -** Drop Down Combo-Box Name; mandatory for form processing
- **size=“” - s** ize of the drop-down list
- **multiple -** Allow multiple selections

`<option></option>` **- individual items of the drop-down list** `<option>` **tag Attributes:**

- **value=“” -** Option value selected or default value set
- `<textarea>`lot of text like description - Large area for text inputs

`<textarea>` **Tag Attributes:**

- **name=“” -** Text area name for form processing
- **rows=“” -** Number of rows of text shown
- **cols=“” -** Number of columns (characters per row)
- **wrap=“” -** text wrapping

### iframe

- `<iframe src=””></iframe>` - embed another document within the current document (page) in a frame.
- **Attribute “src” –** location of the document to be embedded

### Links

HTML links, also called as hyperlinks are defined by ‘a’ tag – **Attributes –**

- **href = “” –** the url to be visited when the link is clicked
- **target = “” –** specifies where to open the link - \_blank (new tab/window), \_self (same window/tab), \_parent (in the parent frame), framename – open in a particular frame.
- **title = “” –** gives information about the element
- **id = “” –** to create bookmarks in the page that can be used as value in href attribute.

**Examples –**

- `<a href = "https://onehack.st/">Go to onehack.st</a>`
- `<a href = "C:\Users\Public">Open a resource from the given location</a>`
- `<a href = "#divprop">Reach a div element specified by the name</a>`

[Build Responsive Real World Websites with HTML5 and CSS3](https://click.linksynergy.com/link?id=jU79Zysihs4&offerid=1045023.1701404&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fbuild-3-real-world-websites-using-html5-css3-js-bootstrap4%2F)

### Styles

For styling, there are many attributes being used with various tags. The attributes are –

```auto
<style>
 text-align= “” – align text; left, right, center
 background-color = “” – background color of the element
 color=”” – for color of texts
 font-family = “” – for various fonts
 font-size = “” size of the font
 border = “” – border thickness and color for a table
</style>

```

These styling elements are put together in a CSS.

### Lists

There are two types of lists – ordered and unordered.

 **-** ordered list **Attributes –**

- `type=”” – the numbering of the list – A, a, I, 1, i`
- `start = “” – starting value`
- `<ul></ul> - unordered list`

**Attributes –**

- `type = “” – type of bullet – square, circle, disc`
- `<li></li> - individual value in the list`

**Attributes** –

- `<value> = “” – value of list item`
- `<type>=”” – type of the list item`

### Images

**![]() -** shows the image when page loads **Attributes –**

- **src =”sourceofimage” –** source of the image; url or file location; mandatory
- **alt = “alternate text” –** alternate text; mandatory
- **align = “left/right/center” –** alignment with respect to surrounding items (text)
- **width = “” –** in pixels or percentage
- **height = “” -** in pixels or percentage
- **border = “” –** thickness of the border in pixels
- **hspace = “” –** space in pixels on the sides of the image
- **vspace = “” –** space in pixels on top and bottom of the image

## HTML5 Tags

 ![--](https://onehack.st/uploads/default/original/3X/d/5/d537140f63c88977e8e5b916c1e8424d303634f9.png)

`(Source: hackr.io)`

**Happy learning!**

---

<div class="post-metadata">

**Author:** ![Bunuda\_Denemeli\_AS\_v](https://onehack.st/user_avatar/onehack.st/bunuda_denemeli_as_v/32/117963_2.png) [@Bunuda\_Denemeli\_AS\_v](https://onehack.st/u/Bunuda_Denemeli_AS_v)\
**Post date:** [March 19, 2023, 2:14pm UTC](https://onehack.st/t/html-cheat-sheet-become-a-pro/234580/2 "2023-03-19T14:14:47Z")

</div>

Very good Thank you very much