HTML QUICK NOTES
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a basic HTML structure.</p>
</body>
</html>
General Syntax
<tagname>Content goes here</tagname>
General Syntax
<tagname attribute1="value1" attribute2="value2">Content goes here</tagname>
HTML Tags
Basic Structure Tags
Tag Description Common Attributes
<html> Root of the HTML document lang, dir, xmlns
<head> Metadata container None commonly used
<title> Sets the title in the browser tab None
<body> Visible page content id, class, style, onload, bgcolor (deprecated)
Text Formatting Tags
Tag Description Common Attributes
<h1> to Headings from largest to smallest id, class, style, align (deprecated)
<h6>
<p> Paragraph id, class, style, align (deprecated)
<b> Bold (stylistic) id, class, style
<i> Italic (stylistic) id, class, style
<u> Underline (stylistic) id, class, style
<br> Line break clear (deprecated)
<hr> Horizontal line width, size, color, align (deprecated)
<small> Smaller text id, class, style
<strong> Bold (semantic emphasis) id, class, style
<em> Italic (semantic emphasis) id, class, style
List Tags
Tag Description Common Attributes
<ul> Unordered (bulleted) list type (deprecated), id, class
<ol> Ordered (numbered) list type, start, reversed, id, class
<li> List item value (only in <ol>), id, class
<dl> Description list id, class
<dt> Term in description list id, class
<dd Description of the term id, class
>
Link and Media Tags
Tag Description Common Attributes
<a> Hyperlink href, target, rel, title, id, class
<img> Image src, alt, width, height, title, loading
<video> Video embed src, controls, autoplay, loop, muted, poster, width, height
<audio> Audio embed src, controls, autoplay, loop, muted
<source Source file for media src, type
>
<iframe Inline frame to embed another HTML page src, width, height, title, loading, allowfullscreen
>
Table Tags
Tag Description Common Attributes
<table> Defines a table border, cellspacing, cellpadding, width, id, class
<tr> Table row id, class, style
<td> Table data (cell) colspan, rowspan, headers, id, class
<th> Table header cell scope, colspan, rowspan, id, class
<thead> Group of header rows id, class
<tbody> Group of body rows id, class
<tfoot> Group of footer rows id, class
Form Tags
Tag Description Common Attributes
<form> Form container action, method, enctype, target, id, class
<input> Input field type, name, value, placeholder, required, id, class
<textarea> Multiline input name, rows, cols, placeholder, required, id, class
<button> Clickable button type, name, value, disabled, id, class
<select> Dropdown list name, multiple, required, id, class
<option> Option in dropdown value, selected, disabled, label
<label> Label for form element for, id, class
Semantic Tags
Tag Description Common Attributes
<header> Header section of a page or section id, class, style
<footer> Footer section id, class, style
<article> Independent self-contained content id, class, style
<section> Section of related content id, class, style
<nav> Navigation links id, class, style, role
<aside> Side content (ads, tips, etc.) id, class, style
<main> Main content of the document id, class, style, role
Metadata & Scripting Tags
Tag Description Common Attributes
<meta> Metadata (charset, description, etc.) name, content, charset, http-equiv
<link> External resources (like CSS) rel, href, type, media
<script> JavaScript code src, type, async, defer
<style> Internal CSS styles type, media, scoped (obsolete)
Interactive Tags
Tag Description Common Attributes
<details> Expandable content section open, id, class
<summary> Summary (title) of <details> section id, class
<dialog> Modal dialog or pop-up open, id, class