Cheat Sheet
HTML Tags
Document Structure
<!DOCTYPE html>: Declares the document type and version of HTML.<html>: Root element of an HTML document.<head>: Contains metadata like title, links to stylesheets, and scripts.<title>: Defines the title of the webpage, shown on the browser tab.<body>: Contains all the visible content of the webpage.
Text Elements
<h1> to <h6>: Heading tags, with <h1> being the highest level and <h6> the lowest.<p>: Paragraph tag, used for text blocks.<br>: Line break, moves the text to a new line.<hr>: Horizontal rule, creates a break in content.
Formatting Tags
<strong>: Defines important text, usually displayed in bold.<em>: Emphasized text, typically italicized.<b>: Bold text without implying importance.<i>: Italic text without emphasis.<u>: Underlined text.
Links and Media
<a href="url">: Anchor tag for links. The href attribute specifies the link destination.<img src="url" alt="description">: Embeds an image. The src is the image source, and alt provides alternative text.<video src="url" controls>: Embeds a video file. The controls attribute allows play/pause buttons.<audio src="url" controls>: Embeds an audio file with control options.
Lists
<ul>: Unordered list.
<li>: List item, used inside lists.
<ol>: Ordered list (numbered).
<li>: List item, used inside lists.
<dl>: Definition list.
<dt>: Definition term.<dd>: Definition description.
Tables
<table>: Defines a table.<tr>: Table row.<th>: Table header cell.<td>: Table data cell.<thead>: Groups header rows in a table.<tbody>: Groups body rows in a table.<tfoot>: Groups footer rows in a table.
Forms
<form>: Container for input elements like text fields, checkboxes, and buttons.
<input type="text">: Single-line text input field.<input type="password">: Password input field (characters are hidden).<input type="checkbox">: Checkbox input.<input type="radio">: Radio button input (only one can be selected).<textarea>: Multi-line text input.<button>: Clickable button.<select>: Dropdown list.
<option>: Defines an option in a dropdown list.
Semantic Elements (Structure)
<header>: Defines a header section.<footer>: Defines a footer section.<article>: Defines an independent piece of content.<section>: Defines sections of a document.<nav>: Navigation links section.<aside>: Sidebar content or tangential content.<main>: The main content of the document.
Div and Span
<div>: Block-level container used for grouping elements.<span>: Inline container used for styling parts of text or grouping inline elements.
Meta Tags
<meta charset="UTF-8">: Defines the character set (UTF-8 is most common).<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures responsive design on mobile devices.<meta name="description" content="Page description">: Provides a description for search engines.
Script and Style
<style>: Embeds CSS styles within the document.<link rel="stylesheet" href="styles.css">: Links an external CSS file.<script src="script.js">: Links an external JavaScript file.<noscript>: Content displayed if the browser doesn't support JavaScript.
Attributes
Attributes are tags on an HTML element that have an impact on the function of an element.
Common attributes include:
id: Unique identifier for an element.class: Groups elements for styling with CSS.href: URL of the link destination.src: URL of the image, video, or audio source.alt: Alternative text for images.type: Type of input field (text, password, checkbox, radio).
Comments
Comments are used to add notes to the code that are not displayed in the browser.
<!-- This is a comment -->
Entities
Entities are special characters that cannot be used directly in HTML.
<: Less than (<).>: Greater than (>).": Double quote (").': Single quote (').&: Ampersand (&).
Web Techniques
URL Structure
https://example.com/index.html
Scheme (http, https): Protocol used to access the resource.Domain name (example.com): The Server the resource is at.Path: (/index.html): The Path the resource is at on the server.
Web Communication
Server: An external location that can receive and send information.Browser/Web ClientThe client the user interfaces with that can send and receive information from the server.PageA resource on the server that can be sent to the client that the browser can render (show to the user).
Popular Web Browsers
Google Chrome: A popular browser developed by Google.Firefox: An open-source browser developed by Mozilla.Safari: A browser developed by Apple.Microsoft Edge: A browser developed by Microsoft.Opera: A browser developed by Opera Software.Brave: A privacy-focused browser.Vivaldi: A browser developed by Vivaldi Technologies.UC Browser: A browser developed by UCWeb.Internet Explorer: A browser developed by Microsoft.Maxthon: A browser developed by Maxthon Ltd.Tor Browser: A browser focused on extreme privacy.
Popular Web Servers
Apache: An open-source web server.Nginx: A high-performance web server.Microsoft IIS: A web server developed by Microsoft.LiteSpeed: A commercial web server.Google Web Server: A web server developed by Google.Tomcat: An open-source Java Servlet container.Node.js: A JavaScript runtime that can be used as a web server.Caddy: An open-source web server with automatic HTTPS.
CSS Rules
Inline, Internal, External
Inline CSS: Applied directly to an element using the style attribute.Internal CSS: Defined in the <style> element within the <head> section.External CSS: Linked to the HTML document using the <link> element.
Syntax
CSS rules consist of a selector and a declaration block.
h1 {
color: red;
}
Selector Types
Element Selector: Selects elements based on their tag name.Class Selector: Selects elements with a specific class attribute.ID Selector: Selects an element with a specific id attribute.
Properties
Properties can be used to apply styles to specific elements, selected by a selector.
Some common properties include:
color: Text color.font-size: Font size.background-color: Background color.border: Border around an element.margin: Space outside an element.padding: Space inside an element.width: Width of an element.height: Height of an element.display: How an element is displayed.position: Positioning of an element.
Color
Colors can be specified using:
Color Names: red, blue, green.Hexadecimal: #ff0000, #00ff00, #0000ff.RGB: rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255).RGBA: rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5), rgba(0, 0, 255, 0.5).
Border
Borders can be styled using:
border-width: Thickness of the border.border-style: Style of the border (solid, dashed, dotted).border-color: Color of the border.border-radius: Curvature of the border corners.
Box Model
The box model consists of:
Content: The actual content of the box.Padding: Space between the content and the border.Border: The border around the content and padding.Margin: Space outside the border.
Positioning
Elements can be positioned using:
static: Default positioning.relative: Relative to its normal position.absolute: Relative to the nearest positioned ancestor.fixed: Relative to the viewport.
Text
Text can be styled using:
font-family: Font type.font-size: Font size.font-weight: Font weight (boldness).text-align: Alignment of text.text-decoration: Underline, overline, line-through.text-transform: Uppercase, lowercase, capitalize.
Background
Backgrounds can be styled using:
background-color: Background color.background-image: Background image.background-repeat: Repeat, no-repeat, repeat-x, repeat-y.background-position: Position of the background image.background-size: Size of the background image.
Flexbox
Flexbox is a layout model that allows elements to align and distribute space within a container.
display: flex: Enables flexbox layout.flex-direction: Direction of the main axis (row, column).justify-content: Alignment along the main axis.align-items: Alignment along the cross axis.flex: Flex grow, shrink, basis.
Grid
Grid is a layout model that allows elements to be placed in rows and columns.
display: grid: Enables grid layout.grid-template-columns: Defines the columns of the grid.grid-template-rows: Defines the rows of the grid.grid-gap: Space between grid items.grid-column: Specifies the grid columns an item should span.grid-row: Specifies the grid rows an item should span.
Link
Links can be styled using:
text-decoration: Underline, overline, line-through.color: Text color.hover: Styles applied when hovered over.active: Styles applied when clicked.
Table
Tables can be styled using:
border-collapse: Collapse or separate table borders.border-spacing: Space between table borders.text-align: Alignment of table text.padding: Space inside table cells.border: Border around table cells.
List
Lists can be styled using:
list-style-type: Type of list marker (disc, circle, square).list-style-position: Position of the list marker (inside, outside).list-style-image: Image used as the list marker.
Pseudo Classes and Elements
Pseudo classes and elements are used to style elements based on their state or position in the document.
:hover: Styles an element when hovered over.:active: Styles an element when clicked.:focus: Styles an element when focused.::before: Inserts content before an element.::after: Inserts content after an element.::first-child: Styles the first child of an element.::last-child: Styles the last child of an element.
Media Queries
Media queries are used to apply styles based on the device characteristics.
@media screen and (max-width: 600px): Styles applied when the screen width is 600px or less.@media print: Styles applied when printing the page.@media (orientation: landscape): Styles applied when the device is in landscape orientation.
Transitions and Animations
Transitions and animations are used to create movement and effects on elements.
transition: Specifies the transition properties (property, duration, timing function, delay).animation: Specifies the animation properties (name, duration, timing function, delay, iteration count).
Combinators
Combinators are used to select elements based on their relationship in the document.
Descendant Selector (space): Selects an element that is a descendant of another element.Child Selector (>): Selects an element that is a direct child of another element.Adjacent Sibling Selector (+): Selects an element that is an adjacent sibling of another element.General Sibling Selector (~): Selects an element that is a sibling of another element.
Link Pseudo tags
:link: Styles an unvisited link.:visited: Styles a visited link.:hover: Styles an element when hovered over.:active: Styles an element when clicked.:focus: Styles an element when focused.
Floating
Floating is used to position elements to the left or right within their container.
float: left: Floats an element to the left.float: right: Floats an element to the right.clear: both: Clears the float property on both sides.
Clear
Clear is used to prevent elements from wrapping around a floated element.
clear: left: Prevents elements from wrapping around a floated element on the left.clear: right: Prevents elements from wrapping around a floated element on the right.clear: both: Prevents elements from wrapping around a floated element on both sides.