HTML, CSS and PHP: The Ultimate Cheat Sheet
Our content is reader-supported. If you click on our links, we may earn a commission. How we review.
📥 Download my HTML, CSS and PHP cheat sheets, complete with everything you need to know and remember regarding these three coding languages.
The art of coding can take years to fully master with all the tags, syntaxes, and other elements of programming languages often intertwined.
Even the more experienced developers can fall into the trap of forgetting the correct syntax for particular tasks. As such, it’s unrealistic to expect more green web developers to have a flawless grasp of the art.
This is why cheat sheets for HTML, CSS, and PHP are extremely useful, regardless of how long you’ve been practicing. It serves as a quick guide to finding the right commands and syntaxes, allowing you to focus on actual web development.
Below, you’ll find visually inclined cheat sheets preceded by quick refreshers to aid you in your coding endeavors. I’ve also made it to be easily bookmarked, saved, or printed for your convenience.
What is HTML?
HTML stands for Hypertext Markup Language – a code that’s used to create the structure for a web page and its content.
This markup language is comprised of a series of elements that used to make content appear or function a certain way and is a major part of the front-end code of every website.
HTML is the language for describing the structure of Web pages … With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as paragraph, list, table, and so on. – from W3.org
For example, you can enclose or wrap different parts of the content – where the enclosing tags can make a word or image hyperlink to another page. You can also use this to italicize words and make the fonts bigger or smaller, among others.
As noted by W3, some of the other things HTML allows you to do include:
- Publishing online documents with headings, text, tables, lists, photos, etc.
- Retrieving online information at the click of a button via hypertext links.
- Designing forms for conducting transactions with remote services to search for information, make reservations, or order products, among other functions.
- Including spreadsheets, video clips, and other media and applications already in your documents.
So if you were to make the line “My dog is very sweet” stand by itself, you can specify that it is a paragraph by enclosing it in paragraphs tags (more on this later), which would look like:
My dog is very sweet
What is the difference between HTML and HTML5?
As the name suggests, HTML5 is the fifth version of the HTML standard. It supports the integration of video and audio into the language, which reduces the need for third-party plugins and elements.
Below are the main differences between HTML and HTML5:
HTML
- Doesn’t support audio and video without flash player support.
- Uses cookies to store temporary data.
- Doesn’t allow JavaScipt to run in the browser.
- Allows for vector graphics by using different technologies like VML, Silver-light, and Flash, among others.
- Doesn’t allow drag and drop effects.
- Works with all older browsers.
- Less mobile-friendly.
- Doctype declaration is long and complicated.
- Doesn’t have elements like nav and header, as well as attributes like charset, async, and ping.
- Extremely difficult to get true GeoLocation of users by using a browser.
- Can’t handle inaccurate syntax.
HTML5
- Supports audio and video controls with the use of and tags.
- Uses SQL databases and application cache to store offline data.
- Allows JavaScript to work in the background with the use of JS Web worker API.
- Vector graphics are a fundamental part of HTML5, much like SVG and canvas.
- Allows drag and drop effects.
- Make it possible to draw shapes.
- Supports all new browsers like Firefox, Mozilla, Chrome, and Safari.
- More mobile-friendly.
- Doctype declaration is simple and easy.
- Has new elements for web structures like nav, header, and footer, among others, and also has attributes of charset, async, and ping.
- Makes character encoding simple and easy.
- Allows for tracking of user GeoLocation by using JS GeoLocation API.
- Capable of handling inaccurate syntax.
Additionally, there are many elements of HTML that have either been modified or removed from HTML5. These include:
- – Changed to
- – Changed to
- – Changed to
- – Removed
- – Removed
- – Removed
- – No new tag. Uses CSS.
- – No new tag. Uses CSS.
- – No new tag. Uses CSS.
- – No new tag. Uses CSS.
- – No new tag. Uses CSS.
Meanwhile, HTML5 also includes a number of newly added elements. These include:
- nav
- audio
- figcaption
- progress
- command
- time
- datalist
- video
- figure
- meter
- data
- keygen
- embed
- article
- hgroup
- bdi
- mark
- output
- source
- track
- section
- ruby
HTML5 Examples (Code PlayGround)
Semantic Structure Examples
In HTML5 there are some semantic elements that can be used to define different parts of a web page. Here are the most common ones:
Header
Таблица кодирования символов в URL
В URL некоторые символы должны кодироваться, в PHP для этого применяется функция urlencode() . По её алгоритму все символы, кроме латинских букв, — , _ , . заменяются знаком процента ( % ), за которым идут два шестнадцатеричных числа (поэтому результат зависит от кодировки), пробелы заменяются на знак сложения ( + ). Так же есть функция rawurlencode() , которая выполняет туже роль, но с минимальным различием – символ ~ остается без изменяя.
Таблица URL-кодирования:
| Символ | UTF-8 | ANSI |
|---|---|---|
| ~ | %7E | %7E |
| ` | 60% | 60% |
| ‘ | 27% | 27% |
| « | 22% | 22% |
| @ | 40% | 40% |
| ? | %3F | %3F |
| ! | 21% | 21% |
| # | 23% | 23% |
| № | %E2%84%96 | %B9 |
| $ | 24% | 24% |
| % | 25% | 25% |
| ^ | %5E | %5E |
| & | 26% | 26% |
| + | %2B | %2B |
| * | %2A | %2A |
| : | %3A | %3A |
| , | %2C | %2C |
| ( | 28% | 28% |
| ) | 29% | 29% |
| %7B | %7B | |
| > | %7D | %7D |
| [ | %5B | %5B |
| ] | %5D | %5D |
| %3C | %3C | |
| > | %3E | %3E |
| / | %2F | %2F |
| %5C | %5C | |
| А | %D0%90 | %C0 |
| а | %D0%B0 | %E0 |
| Б | %D0%91 | %C1 |
| б | %D0%B1 | %E1 |
| В | %D0%92 | %C2 |
| в | %D0%B2 | %E2 |
| Г | %D0%93 | %C3 |
| г | %D0%B3 | %E3 |
| Д | %D0%94 | %C4 |
| д | %D0%B4 | %E4 |
| Е | %D0%95 | %C5 |
| е | %D0%B5 | %E5 |
| Ё | %D0%81 | %A8 |
| ё | %D1%91 | %B8 |
| Ж | %D0%96 | %C6 |
| ж | %D0%B6 | %E6 |
| З | %D0%97 | %C7 |
| з | %D0%B7 | %E7 |
| И | %D0%98 | %C8 |
| и | %D0%B8 | %E8 |
| Й | %D0%99 | %C9 |
| й | %D0%B9 | %E9 |
| К | %D0%9A | %CA |
| к | %D0%BA | %EA |
| Л | %D0%9B | %CB |
| л | %D0%BB | %EB |
| М | %D0%9C | %CC |
| м | %D0%BC | %EC |
| Н | %D0%9D | %CD |
| н | %D0%BD | %ED |
| О | %D0%9E | %CE |
| о | %D0%BE | %EE |
| П | %D0%9F | %CF |
| п | %D0%BF | %EF |
| Р | %D0%A0 | %D0 |
| р | %D1%80 | %F0 |
| С | %D0%A1 | %D1 |
| с | %D1%81 | %F1 |
| Т | %D0%A2 | %D2 |
| т | %D1%82 | %F2 |
| У | %D0%A3 | %D3 |
| у | %D1%83 | %F3 |
| Ф | %D0%A4 | %D4 |
| ф | %D1%84 | %F4 |
| Х | %D0%A5 | %D5 |
| х | %D1%85 | %F5 |
| Ц | %D0%A6 | %D6 |
| ц | %D1%86 | %F6 |
| Ч | %D0%A7 | %D7 |
| ч | %D1%87 | %F7 |
| Ш | %D0%A8 | %D8 |
| ш | %D1%88 | %F8 |
| Щ | %D0%A9 | %D9 |
| щ | %D1%89 | %F9 |
| Ъ | %D0%AA | %DA |
| ъ | %D1%8A | %FA |
| Ы | %D0%AB | %DB |
| ы | %D1%8B | %FB |
| Ь | %D0%AC | %DC |
| ь | %D1%8C | %FC |
| Э | %D0%AD | %DD |
| э | %D1%8D | %FD |
| Ю | %D0%AE | %DE |
| ю | %D1%8E | %FE |
| Я | %D0%AF | %DF |
| я | %D1%8F | %FF |