Scribd
Upload
2 views9 pages

HTML Tags Reference

The document is a comprehensive reference chart for HTML tags, detailing 113 standard tags categorized by their functions, such as document structure, text formatting, links, images, and forms. It includes descriptions of each tag's purpose and notes on deprecated tags and best practices for HTML usage. Additionally, it provides quick tips for writing valid HTML and a list of input types for forms.

Uploaded by

ayodelejohnson450
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views9 pages

HTML Tags Reference

The document is a comprehensive reference chart for HTML tags, detailing 113 standard tags categorized by their functions, such as document structure, text formatting, links, images, and forms. It includes descriptions of each tag's purpose and notes on deprecated tags and best practices for HTML usage. Additionally, it provides quick tips for writing valid HTML and a list of input types for forms.

Uploaded by

ayodelejohnson450
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

■ HTML Tags

Complete Reference Chart


All 113 Standard Tags · Categories · Descriptions · Emojis

113+ 12 ■ ■
Total Tags Categories Fast Reference Exam Ready

Colour Legend:

Description ■■ Deprecated

Document Structure

TAG WHAT IT DOES

<!DOCTYPE> ■ Declares the document type and HTML version

<html> ■ Root element of an HTML page

<head> ■ Contains meta-information about the document

<body> ■■ Defines the document's visible page content

<title> ■■ Defines the title shown on browser tab

<base> ■ Specifies the base URL for all relative URLs


Text & Headings

TAG WHAT IT DOES

<h1> 1■■ Largest heading (most important)

<h2> 2■■ Second-level heading

<h3> 3■■ Third-level heading

<h4> 4■■ Fourth-level heading

<h5> 5■■ Fifth-level heading

<h6> 6■■ Smallest heading (least important)

<p> ■ Defines a paragraph

<span> ✏■ Inline container for text/styling

<div> ■ Block-level container / section divider

<pre> ■■ Preformatted text (preserves spaces & line breaks)

<code> ■ Inline code snippet

<br> ↵ Inserts a single line break

<hr> ■ Thematic horizontal rule / divider

<blockquote> ■ Defines a section quoted from another source

<q> ■■ Short inline quotation

<cite> ■ Defines the title of a creative work

<abbr> ■ Defines an abbreviation or acronym

<address> ■ Defines contact information for the author

<bdo> ↔■ Overrides the text direction

<wbr> ■ Defines a word break opportunity


Text Formatting

TAG WHAT IT DOES

<b> ■ Bold text (no extra importance)

<strong> ■ Important text (bold with semantic meaning)

<i> ■ Italic text (no extra importance)

<em> ■ Emphasized text (italic with semantic meaning)

<u> U■ Underlined text

<s> ~~ Strikethrough text (no longer accurate)

<del> ■■ Deleted text (document edits)

<ins> ■ Inserted text (document edits)

<mark> ■ Highlighted / marked text

<small> ■ Smaller text

<sub> ■ Subscript text

<sup> ² Superscript text

<kbd> ■■ Keyboard input text

<samp> ■■ Sample output from a program

<var> ■ Defines a variable in math/programming

<dfn> ■ Defines a term being defined

<time> ■ Defines a date/time value

<ruby> ■ Defines a ruby annotation (East Asian typography)

<rt> ■■ Defines pronunciation for ruby annotation

<rp> ■■ Fallback for browsers that don't support ruby

Links & Navigation

TAG WHAT IT DOES

<a> ■ Defines a hyperlink

<nav> ■ Defines a set of navigation links

<link> ■ Links external resources (CSS, icons) in <head>

<area> ■■ Defines a clickable area inside an image map

<map> ■ Defines an image map (clickable regions on image)


Images & Media

TAG WHAT IT DOES

<img> ■■ Embeds an image

<figure> ■ Self-contained content (image + caption)

<figcaption> ■ Caption for a <figure> element

<picture> ■ Responsive images with multiple sources

<source> ■■ Specifies multiple media resources

<video> ■ Embeds a video

<audio> ■ Embeds audio content

<track> ■ Subtitles/captions for video/audio

<iframe> ■ Embeds another HTML page inside current page

<embed> ■ Embeds external content (Flash, plugins)

<object> ■ Embeds an external resource / multimedia

<canvas> ■ Draw graphics via JavaScript scripting

<svg> ✏■ Defines Scalable Vector Graphics

Lists

TAG WHAT IT DOES

<ul> • Unordered (bulleted) list

<ol> 1. Ordered (numbered) list

<li> ■■ Defines a list item

<dl> ■ Description list

<dt> ■ Term/name in a description list

<dd> ■ Description/definition in a description list

<menu> ■ Defines an unordered list of commands/options


Tables

TAG WHAT IT DOES

<table> ■ Defines an HTML table

<thead> ■■ Groups the header content in a table

<tbody> ■ Groups the body content in a table

<tfoot> ■■ Groups the footer content in a table

<tr> ➡■ Defines a table row

<th> ■ Defines a table header cell (bold, centered)

<td> ■ Defines a table data cell

<caption> ■ Defines a caption for a table

<colgroup> ■■ Groups columns for formatting

<col> ■ Specifies column properties within <colgroup>

Forms & Inputs

TAG WHAT IT DOES

<form> ■ Defines an HTML form for user input

<input> ■■ Defines an input control (text, radio, checkbox…)

<textarea> ■ Multi-line text input area

<button> ■ Defines a clickable button

<select> ■ Defines a drop-down list

<option> ■ Defines an option inside a <select>

<optgroup> ■■ Groups related options in a <select>

<label> ■■ Defines a label for an <input> element

<fieldset> ■■ Groups related elements in a form

<legend> ■ Defines a caption for a <fieldset>

<datalist> ■ List of pre-defined options for an <input>

<output> ■ Represents the result of a calculation

<progress> ■ Represents the progress of a task

<meter> ■ Defines a scalar measurement within a range


Semantic / Layout

TAG WHAT IT DOES

<header> ■ Defines a header for the page or section

<footer> ■ Defines a footer for the page or section

<main> ■ Specifies the main content of the document

<section> ■ Defines a thematic grouping of content

<article> ■ Self-contained piece of content (blog post, etc.)

<aside> ■ Content aside from the main content (sidebar)

<details> ■ Expandable details widget (disclosure widget)

<summary> ■ Visible heading for a <details> element

<dialog> ■ Defines a dialog box or modal window

<template> ■ Holds client-side content to be reused later

<slot> ■ Placeholder inside a web component

Scripting & Embed

TAG WHAT IT DOES

<script> ■ Defines client-side JavaScript

<noscript> ■ Alternate content if scripts are disabled

<style> ■ Defines CSS styles within the document

<link> ■ Links external stylesheets

<portal> ■ Embeds another page (experimental)

Meta & Head

TAG WHAT IT DOES

<meta> ■ Defines metadata (charset, viewport, SEO, etc.)

<base> ■ Specifies the base URL for relative URLs

<title> ■■ Sets the browser tab title

<style> ■ Internal CSS style block

<script> ■ JavaScript block (also used in body)

<link> ■ Links external resources like CSS files


Deprecated / Obsolete

TAG WHAT IT DOES

<acronym> ■■ Use <abbr> instead — defines acronym

<applet> ■■ Use <embed>/<object> — embeds Java applet

<basefont> ■■ Use CSS — defines default text font

<big> ■■ Use CSS font-size — big text

<center> ■■ Use CSS text-align — centers content

<dir> ■■ Use <ul> instead — directory listing

<font> ■■ Use CSS — defines font color/face/size

<frame> ■■ Use <iframe> — defines a frame in frameset

<frameset> ■■ Use CSS layout — defines a set of frames

<noframes> ■■ Fallback for browsers without frame support

<marquee> ■■ Non-standard scrolling text — avoid

<tt> ■■ Use <code> — teletype/monospace text

<strike> ■■ Use <s> or <del> — strikethrough text

<u> ■■ Now valid again but use CSS for styling


■ Quick HTML Tips & Rules

Tags come in pairs: <p>content</p> — opening + closing tag. Self-closing: <br>, <img>, <input> have no closing tag.
■
Nesting Rule: Tags must be properly nested: CORRECT: <b><i>text</i></b> WRONG: <b><i>text</b></i>
■
Lowercase always: HTML5 convention: always write tags in lowercase. Use <p> not <P>
■
Attributes: Attributes go inside the opening tag: <a href='url'>link</a>
■■
id vs class: id = unique (one element only). class = reusable (many elements can share it).
■
Viewport meta: <meta name='viewport' content='width=device-width, initial-scale=1'> — required for mobile!
■
Accessibility: Always add alt text to images: <img src='[Link]' alt='description'>
■
SEO Tags: Use <title>, <meta name='description'>, and heading hierarchy h1 to h2 to h3 for good SEO.
■
Deprecated tags: Avoid: <font>, <center>, <marquee>, <b> for styling purposes. Use CSS instead!
■■
Valid HTML5 Structure: Every page needs: <!DOCTYPE html> then <html> then <head> (with <title>) then <body>
■

■■ HTML Input Types (for <input type='...'>)


TYPE PURPOSE

text Default text input

password Hidden password input

email Email address

number Numeric input

date Date picker

time Time picker

file File upload

checkbox Tick box

radio Radio button

range Slider

color Color picker

submit Submit button

reset Reset form

hidden Hidden field

search Search box

tel Phone number

url URL input

month Month picker

week Week picker


image Image submit button

■ HTML Tags Reference Chart • Generated for Emmy (UNILAG CS) • Study hard, build great things! ■

You might also like