HTML Tags and CSS Selectors Cheat Sheet
1. Basic Structure Tags
<!DOCTYPE html> - Defines the document type (HTML5)
<html> - Root of the HTML document
<head> - Contains meta info, links, scripts
<title> - Sets the title of the page
<body> - Main content of the page
2. Metadata & Head Tags
<meta> - Defines metadata (charset, viewport, etc.)
<link> - Links to external files (CSS)
<style> - Internal CSS
<script> - JavaScript code or file link
<base> - Sets the base URL for links
<noscript> - Alternative content if JS is disabled
3. Text Content Tags
<h1> to <h6> - Headings
<p> - Paragraph
<br> - Line break
HTML Tags and CSS Selectors Cheat Sheet
<hr> - Horizontal rule
<strong> - Bold text
<em> - Italic text
<b> - Bold (without importance)
<i> - Italic (without emphasis)
<mark> - Highlighted text
<small> - Smaller text
<sub> - Subscript
<sup> - Superscript
<pre> - Preformatted text
<blockquote> - Quoted section
<code> - Inline code
4. List Tags
<ul> - Unordered list
<ol> - Ordered list
<li> - List item
HTML Tags and CSS Selectors Cheat Sheet
<dl> - Description list
<dt> - Term
<dd> - Description
5. Link & Navigation Tags
<a> - Anchor (link)
<nav> - Navigation section
6. Image & Media Tags
<img> - Image
<audio> - Audio player
<video> - Video player
<source> - Media source
<track> - Subtitles or captions
<figure> - Figure container
<figcaption> - Caption for figure
7. Table Tags
<table> - Table
<thead> - Table header
HTML Tags and CSS Selectors Cheat Sheet
<tbody> - Table body
<tfoot> - Table footer
<tr> - Table row
<th> - Header cell
<td> - Data cell
<caption> - Table title
<col> - Column formatting
<colgroup> - Group of columns
8. Form Tags
<form> - Form container
<input> - Input field
<textarea> - Multi-line input
<button> - Button
<select> - Dropdown
<option> - Dropdown option
<label> - Label
HTML Tags and CSS Selectors Cheat Sheet
<fieldset> - Group of form controls
<legend> - Title for <fieldset>
<datalist> - Suggestion list
<output> - Calculation result
9. Semantic Layout Tags
<header> - Page/header section
<footer> - Page/footer section
<main> - Main content
<section> - Section
<article> - Article
<aside> - Sidebar
<div> - Block container
<span> - Inline container
10. Scripting & Others
<script> - JavaScript
<canvas> - Draw graphics
<svg> - Vector graphics
HTML Tags and CSS Selectors Cheat Sheet
<iframe> - Embed another page
<template> - Hidden template
<details> - Expandable content
<summary> - Title of details
<dialog> - Dialog box
<embed> - External content
<object> - Embed app
<param> - Object parameters
CSS Selectors
1. Universal Selector:
* { } - Selects all elements
2. Type Selector:
p { } - Selects all <p> tags
3. Class Selector:
.box { } - Selects elements with class="box"
4. ID Selector:
#main { } - Selects element with id="main"
5. Group Selector:
HTML Tags and CSS Selectors Cheat Sheet
h1, p, .box { } - Selects multiple elements
6. Descendant Selector:
div p { } - Selects <p> inside <div>
7. Child Selector:
div > p { } - Selects direct <p> children
8. Adjacent Sibling Selector:
h1 + p { } - Selects next <p> after <h1>
9. General Sibling Selector:
h1 ~ p { } - Selects all following <p> siblings
10. Attribute Selectors:
input[type="text"] - Elements with specific attribute
[href^="https"] - Starts with
[href$=".pdf"] - Ends with
[href*="google"] - Contains
11. Pseudo-classes:
a:hover - On hover
input:focus - On focus
li:first-child - First child
li:last-child - Last child
li:nth-child(2) - Second child
12. Pseudo-elements:
p::before - Before content
p::after - After content
::selection - Selected text
