Comprehensive HTML Reference Guide
1. Introduction to HTML and Basic Structure
HTML (Hypertext Markup Language) is the universally utilized language for authoring Web Pages.
• Hypertext: This refers to the links that connect different Web pages together.
• Markup Language: This indicates that HTML uses tags to "mark up" a text document, instructing
the browser on how to display its structure.
A standard HTML5 document features a specific structural hierarchy:
• <!DOCTYPE html> : This declaration tells the web browser the version of HTML being used, which
in this case is HTML5.
• <html> : This tag envelops the entire document.
• <head> : This section contains the document's header, housing metadata tags like <title> ,
which names the page.
• <body> : This section contains the visible content of the page, including elements like headings
( <h1> ), paragraphs ( <p> ), and divisions ( <div> ).
HTML Elements vs. Tags
• An HTML element is generally defined by a starting tag, content, and a closing tag (e.g.,
<p>Content</p> ).
• Void elements (empty tags) do not require a closing tag because they do not enclose content.
Examples include <br /> (line break), <hr /> (horizontal rule), and <img /> (images).
• Elements can be freely nested inside one another (e.g., <h1>This is <i>italic</i></h1> ).
HTML Comments
• Comments are snippets of code completely ignored by the web browser, used to explain code or
increase readability.
• They are formulated using <!-- ... --> .
• Comments can span multiple lines but cannot be nested inside one another.
2. Text Formatting and Layout
Structural Formatting
HTML provides a wide variety of tags to organize text on a webpage:
• Headings: Ranging from <h1> (largest) to <h6> (smallest), headings automatically add a blank
line before and after their display.
• Paragraphs: The <p> tag is used to structure standard text blocks.
• Line Breaks: The <br /> tag pushes subsequent content to the next line without creating a new
paragraph.
• Horizontal Rules: The <hr /> tag creates a visible horizontal line across the page to break up
sections.
• Centering: The <center> tag can be used to middle-align any enclosed content.
• Preformatted Text: The <pre> tag preserves the exact spacing and line breaks of the source
text.
Visual Text Formatting
HTML allows for direct visual manipulation of text:
• Bold: Use <b> or <strong> .
• Italics: Use <i> .
• Underline: Use <u> .
• Strikethrough: Use <strike> to put a line directly through text.
• Superscript and Subscript: Use <sup> to raise text half a character height, and <sub> to lower
it.
Fonts (Deprecated)
While CSS is the modern standard for styling, HTML historically used the <font> and <basefont>
tags to manipulate text appearance.
• size: Adjusts the text size on a scale from 1 (smallest) to 7 (largest), with 3 being the default.
• face: Specifies the font family (e.g., "Times New Roman"). You can list multiple fonts separated by
commas to provide fallbacks.
• color: Changes the text color using a color name or hexadecimal code.
3. Element Grouping: Blocks vs. Inlines
Block Level Elements
• These elements behave as if they have a line break before and after them.
• They take up the full width available and force subsequent elements onto a new line.
• Examples include: <p> , <h1> to <h6> , <ul> , <ol> , <dl> , <pre> , <hr /> , and
<blockquote> .
• The <div> Tag: This is a crucial block-level tag used to group other elements together. It serves
as a container to apply CSS styling or build webpage layouts.
Inline Elements
• These elements flow within standard text sentences and do not force a new line.
• Examples include: <b> , <i> , <u> , <em> , <strong> , <sup> , <sub> , and <li> .
• The <span> Tag: This is an inline grouping tag used to target specific text or inline elements for
styling, without disrupting the paragraph's flow.
4. Attributes
Attributes are extra properties embedded within an opening tag to define its characteristics. They consist
of a name and a value enclosed in quotes.
Core Attributes
• id: Uniquely identifies a single element on a page, useful for targeting specific elements with CSS
or scripts.
• title: Provides a tooltip that appears when a user hovers their cursor over the element.
• class: Associates an element with a specific CSS class. Multiple classes can be applied using
spaces.
• style: Allows for the direct insertion of inline CSS rules (e.g., style="color:red" ).
Internationalization Attributes
• dir: Indicates the reading direction of the text. Values are ltr (left to right, the default) or rtl
(right to left, used for languages like Arabic).
• lang and xml:lang: Used to indicate the primary language of the document.
5. Webpage Backgrounds
By default, web browsers display a white background. HTML provides attributes to change this on
specific elements like <body> and <table> :
• Colors: The bgcolor attribute changes the background color. Colors can be defined via standard
names (e.g., "yellow"), Hexadecimal values (e.g., "#6666FF"), or RGB values (e.g.,
"rgb(255,0,255)").
• Images: The background attribute allows you to use an image URL (such as JPEG, GIF, or
PNG) to fill the background.
6. Images and Special Characters
Images
• Images are embedded using the empty <img> tag.
• src: The mandatory attribute that dictates the URL or file path of the image.
• alt: Provides alternative text if the image fails to load.
• border: Sets the thickness of the image's border in pixels. Setting it to "0" removes the border
entirely.
Special Characters
HTML utilizes special character entities to display symbols that might otherwise interfere with HTML
syntax or aren't readily available on a keyboard.
• A massive library of symbols is accessible, including mathematical symbols, currency signs, and
punctuation.
• Examples include © for copyright, " for quotation marks, & for an ampersand,
and < for the less-than sign (<).
7. Hyperlinks
Hyperlinks allow users to navigate between documents, websites, or specific sections of a page.
• Creation: Links use the anchor tag <a> along with the href attribute, which points to the
destination URL.
• Targeting: The target attribute controls where the link opens.
◦ _blank : Opens in a new window/tab.
◦ _self : Opens in the current frame (default).
◦ _parent : Opens in the parent frame.
◦ _top : Opens in the full body of the window.
• Section Linking: You can jump to a specific part of a page by assigning a <a
name="section_name"></a> to the destination, and linking to it via
<a href="#section_name"> .
• Link Colors: You can modify link states globally in the <body> tag using link (standard),
alink (active/clicked), and vlink (visited).
• Image Links: Wrapping an <img> tag completely inside an <a> tag turns the image itself into a
clickable hyperlink.
8. HTML Lists
HTML provides three distinct ways to formulate lists:
1. Unordered Lists ( <ul> )
• Used for related items that do not require a specific sequence.
• Items are denoted using the <li> tag and are marked with bullets by default.
• The type attribute changes the bullet style to disc (default), square , or circle .
2. Ordered Lists ( <ol> )
• Used when items must follow a strict numbered sequence.
• List items also use the <li> tag.
• The type attribute can dictate the counting scheme: 1 (Numbers), A (Uppercase letters), a
(Lowercase letters), I (Uppercase Roman Numerals), and i (Lowercase Roman Numerals).
• The start attribute can force the counting to begin at a specific number (e.g., start="4" ).
3. Definition Lists ( <dl> )
• Used to present glossaries or name/value pairs.
• <dl> encapsulates the list.
• <dt> dictates the term being defined.
• <dd> dictates the definition of the term.
9. HTML Tables
Tables are incredibly useful for structuring data, links, or media into a rigid grid of rows and columns.
• Structure: A table is created with the <table> tag. Inside, <tr> creates table rows, and <td>
creates data cells.
• Headings: The <th> tag is used in place of <td> to designate table headers, usually bolding
and centering the text.
• Borders: The border attribute adds lines around cells (e.g., border="1" ).
• Spacing Adjustments:
◦ cellpadding : Controls the white space between the inner cell border and the content itself.
◦ cellspacing : Controls the width/distance between the individual cell borders.
• Merging Cells:
◦ colspan : Merges two or more columns into a single wide column.
◦ rowspan : Merges two or more rows into a single tall row.
• Table Aesthetics: Background colors ( bgcolor ), background images ( background ), and border
colors ( bordercolor ) can be applied to entire tables, specific rows, or individual cells.
10. HTML Forms
Forms act as the primary method for collecting user data (like passwords, emails, or search queries) and
routing that data to a back-end script (like PHP or CGI) for processing.
The <form> Tag and Attributes
Forms are initialized with the <form> tag. It utilizes key attributes:
• action: Specifies the backend script URL that will process the data.
• method: Determines how data is uploaded, mostly utilizing GET or POST .
• target: Operates similarly to hyperlink targets, determining where the script's result window will
display.
• enctype: Determines how the browser encodes the data. Use application/x-www-form-
urlencoded for standard forms, and multipart/form-data when handling file uploads.
Form Controls and Inputs
• Single-Line Text: Created with <input type="text"> . Ideal for names or searches. Attributes
include name , value , size , and maxlength .
• Password Inputs: Created with <input type="password"> . Operates exactly like text inputs,
but visually masks the typed characters.
• Multi-Line Text: Created using the <textarea> tag, defined by rows and cols attributes to
control the box size.
• Checkboxes: Created with <input type="checkbox"> . Allows users to select multiple options
simultaneously. Can be pre-ticked using the checked attribute.
• Radio Buttons: Created with <input type="radio"> . Restricts users to selecting only one
option from a group.
• Select Boxes (Dropdowns): Utilizes the <select> tag to create a menu, with individual
<option> tags representing the choices.
• File Uploads: Created with <input type="file"> . The accept attribute can restrict the type
of files the server will take.
• Hidden Controls: Created with <input type="hidden"> . These store data silently (like page
numbers) to be passed back to the server without user interference.
• Buttons: Clickable buttons handle final form actions.
◦ submit : Automatically submits the form data.
◦ reset : Reverts all form inputs to their original default values.
◦ button : A custom button used to trigger client-side scripts.
◦ image : A clickable submission button styled via a background image.