HTML | QUICK REFERENCE GUIDE
|
|
ON THIS PAGE
|
ALSO IN THIS TOPIC
HTML HOME GETTING STARTED HTML TAGS AND ELEMENTS PAGE STRUCTURE AND LAYOUT FORMS AND USER INPUT CSS WITH HTML YOU ARE HERE | HTML QUICK REFERENCE |
|
|
ELEMENT |
DESCRIPTION |
! |
VISUAL STUDIO CODE | Type '!' at the start of a new HTML page and it will auto generate the template head, body and html tags |
<!-- Comment --> |
For commenting code in HTML |
ELEMENT |
DESCRIPTION |
EXAMPLE |
DOCTYPE |
Defines the document type and version of HTML. |
<!DOCTYPE html> |
<html> |
Root element of an HTML document |
<html>...</html> |
<head> |
Container for meta information and other head elements. |
<head>...</head> |
<title> |
Defines the title of the document, shown in browser tabs. |
<title>Page Title</title> |
<body> |
Contains the content of the document. |
<body>...</body> |
<meta> |
Provides metadata about the document. |
<meta charset="UTF-8"> |
ELEMENT |
DESCRIPTION |
Headings (<h1>, <h2>, etc.) |
Used to define headings. <h1> is the highest level and typically used for main titles, while <h6> is the lowest level. |
Paragraphs (<p>) |
Used to define a paragraph of text. |
Line breaks (<br>) and horizontal rules (<hr>) |
The <br> tag inserts a single line break. The <hr> tag creates a thematic break or horizontal rule. |
SECTION 4 | FORMATTING TEXT
|
ELEMENT |
DESCRIPTION |
Bold (<b> or <strong>) |
Used to make text bold. While both tags result in bold text, <strong> is typically used to give importance to the enclosed text, whereas <b> is a stylistic choice. |
Italic (<i> or <em> |
Used to italicize text. Similar to bold, <em> is used to emphasize the enclosed text, whereas <i> is a stylistic choice. |
Strikethrough (<del> or <s>) |
Used to indicate text that has been deleted or should be considered as no longer accurate. |
Text Colour |
Change the colour of individual words or text strings. <p><span style= "color: #ff0000">NAME:</span> <span style= "color: #0022ff">Bob</span></p> |
Highlight Text |
Highlight text with a background colour. <span style="background-color: yellow;">Highlighted text</span> |
Superscript and Subscript |
Raise (<sup>) or lower (<sub>) text relative to the surrounding text. H<sub>2</sub>O (for water) E = mc<sup>2</sup> (Einstein's equation) |
Text Size |
Adjust the size of the text. <span style="font-size: 20px;">Larger text</span> |
Font Family |
Change the font of the text. <span style="font-family: 'Arial';">This is Arial font.</span> |
Text Alignment |
Align text to the left, right, center, or justify. <p style="text-align: center;">Centered text</p> |
Text Transformation |
Convert text to uppercase, lowercase, or capitalize. <span style="text-transform: uppercase;">uppercase text</span> |
Letter Spacing and Word Spacing |
Adjust the space between letters or words. <span style="letter-spacing: 2px;">Wider letters</span> |
Text Shadow |
Add shadows to text for a 3D effect. <span style="text-shadow: 2px 2px 2px gray;">Text with shadow</span> |
Line Height |
Adjust the space between lines of text. <p style="line-height: 1.5;">This is a paragraph with increased line height.</p> |
Text Indentation |
Indent the first line of a paragraph. <p style="text-indent: 30px;">Indented paragraph.</p> |
Text Spaces |
Use to add a blank space in the text. |
ELEMENT |
DESCRIPTION |
Ordered Lists (<ol> |
Used to represent items in a sequence or a set of steps. Each item in the list is marked with a number. <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> |
Unordered Lists (<ul>) |
Used to represent items in no particular order. Each item in the list is marked with a bullet point. <ul> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul> |
Description Lists (<dl>, <dt>, <dd>) |
Used to represent a list of terms and their descriptions. <dt> is used for the term name, and <dd> is used for the term's description. <dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl> |
SECTION 6 | LINKS
|
ELEMENT |
DESCRIPTION |
hyperlinks (<a href="..."> |
Used to create clickable links that can lead to another webpage, file, or any URL. <a href="https://www.example.com">Visit Example</a> |
Linking to email addresses |
Used to create a clickable link that opens the user's email client with a specified email address in the "To" field. <a href="mailto:example@example.com">Email Us</a> |
Target attributes |
Used to specify where the linked document will be opened. Common values include _blank (opens in a new tab or window) and _self (opens in the same tab or window). <a href="https://www.example.com" target="_blank">Open in New Tab</a> |
Anchor Points (<a name="..."> or <a id="...">) |
Used to create links to specific points within a single page. These are often used in long documents to help navigate to different sections without scrolling. <!-- Define the anchor point --> <a name="section1"></a> <h2>Section 1</h2> ... <!-- Link to the anchor point --> <a href="#section1">Go to Section 1</a> |
ELEMENT |
DESCRIPTION |
<table>, <tr>, <td>, <th> |
Used to create a table. <table> defines the table, <tr> defines a row, <td> defines a cell, and <th> defines a header cell. <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> |
border, cellspacing, cellpadding |
Used to style and adjust the spacing of tables and cells. border defines the border thickness, cellspacing defines the space between cells, and cellpadding defines the space between cell content and its border. <table border="1" cellspacing="0" cellpadding="10"> ... </table> |
colspan, rowspan |
Used to specify how many columns or rows a cell should span. colspan defines the number of columns a cell should span, and rowspan defines the number of rows a cell should span. <table> <tr> <td colspan="2">This cell spans 2 columns</td> </tr> <tr> <td>Cell 1</td> <td rowspan="2">This cell spans 2 rows</td> </tr> <tr> <td>Cell 2</td> </tr> </table> |
width, height |
Specifies the width/height of a table, column, or cell. It can be set in pixels or as a percentage. <table width="50%"> <td height="50px">Content</td> </table> |
align, valign |
align: Specifies the horizontal alignment of content within cells. Possible values include left, center, right, and justify. valign: Specifies the vertical alignment of content within cells. Possible values include top, middle, bottom, and baseline. <td align="center">Centered Content</td> <td valign="top">Top-aligned Content</td> |
bgcolor |
Sets the background colour for a table, row, or cell. <td bgcolor="#FF0000">Red Background</td> |
ELEMENT |
DESCRIPTION |
action |
Specifies the URL to which the form data should be sent after submission. It defines the endpoint where the form data will be processed. <form action="/submit"> ... </form> |
method |
Defines the HTTP method used to send the form data. Common methods are GET (appends data to the URL) and POST (sends data in the request body). <form action="/submit" method="post"> |
type |
Specifies the type of input element to display. The type attribute determines how the input field should appear and what kind of data it should accept. Common values include text, radio, checkbox, password, submit, and many others, <input type="text" name="username" placeholder="Enter your username"> <input type="radio" name="gender" value="male"> <input type="radio" name="gender" value="female"> <input type="checkbox" name="interests" value="music"> Music <input type="checkbox" name="interests" value="sports"> <input type="submit" value="Submit Form"> |
name |
Assigns a name to the input element. This name is used to identify the form data after it's submitted, especially on the server side. Each input element in a form should have a unique name if its data is to be collected. <input type="text" name="username"> |
value |
Sets the default value or the current value of an input element. For buttons, it specifies the text displayed on the button. For radio buttons and checkboxes, it specifies the value sent to the server when selected. <input type="text" name="username" value="JohnDoe"> |
placeholder |
Provides a hint or a short description in the input field before the user enters a value. It's displayed in a lighter text colour and disappears once the user starts typing. <input type="text" placeholder="Enter your name"> |
id |
Assigns a unique identifier to the input element. The id attribute can be used for several purposes, such as targeting the element with JavaScript or associating the input with a <label> element for better accessibility. <input type="text" id="username"> |
ELEMENT |
DESCRIPTION |
<header> |
Represents a container for introductory content or a set of navigational links. It typically contains the website logo, website title, and main navigation. <header> <h1>Website Title</h1> <nav>...</nav> </header> |
<footer> |
Represents a container for the footer of a document or section. It typically contains information about the author, copyright information, links related to documents, and more. <footer> <p>Copyright © 2023</p> </footer> |
<article> |
Represents a self-contained composition in a document, which is intended to be independently distributable or syndicated. It could be a forum post, a magazine or newspaper article, a blog entry, or any other independent item of content. <article> <h2>Article Title</h2> <p>Article content...</p> </article> |
<section> |
Represents a standalone section of a document, such as tabs, tabbed content, or any content that stands alone and can be independently interpreted. <section> <h2>Section Title</h2> <p>Section content...</p> </section> |
<nav> |
Represents a section of navigation links, either within the current document or to other documents. Common examples include menus, tables of contents, and indexes. <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> |
<aside> |
Represents a section of a page that contains content aside from the content it is placed in. The content should be related to the surrounding content. Commonly used for sidebars. <aside> <h3>Related Articles</h3> ... </aside> |
<main> |
Represents the main content of a document. There should be only one <main> element per page, and it should be unique from content that is repeated across a set of documents such as site navigation, header, or footer. <main> <h1>Welcome to My Website</h1> <p>This is the main content...</p> </main> |
<figure> and <figcaption> |
<figure> represents content related to the main content, like images, diagrams, photos, code listings, etc., that can be referenced from the main content. <figcaption> can be used as a container for the caption of a <figure> |
<time> |
Represents a specific period in time or a duration. It can be used to encode dates and times in a machine-readable way. <time datetime="2023-04-01">April 1, 2023</time> |
ELEMENT |
DESCRIPTION |
<audio> |
Used to embed sound content in documents. It can contain one or multiple source elements, which represent the same audio content in different formats. <audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio> |
controls |
Adds audio controls, like play, pause, and volume. <audio controls> |
<video> |
Used to embed video content in a document. Like the <audio> element, it can contain one or multiple source elements. <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> |
<img> |
The <img> element is used to embed images in a web page. It's a void element and does not have a closing tag. The source of the image is specified using the src attribute. Alternative text can be provided for accessibility using the 'alt'. <img src="image.jpg" alt="Description of Image" width="500" height="400"> |
<embed> |
The <embed> element is a void element used to embed external content into a web page. This could be multimedia like audio, video, or interactive content. It's a self-contained element, meaning it doesn't have a closing tag. <embed src="file.swf" width="500" height="400"> |
<object> |
The <object> element is used to embed content from an external resource into a web page. It's more versatile than <embed> as it can contain fallback content and parameters. It can be used for a variety of media including: audio, video, images, and interactive content like Flash. <object data="file.swf" width="500" height="400"></object> |
<iframe> |
The <iframe> (inline frame) element is used to embed another document within the current HTML document. It's commonly used to embed content from other sources, such as maps, advertisements, or even entire web pages. <iframe src="https://www.example.com" width="500" height="400"></iframe> |
ELEMENT |
DESCRIPTION |
style |
CSS styles can be applied directly within HTML elements using the style attribute. This method is not recommended for large-scale styling as it mixes HTML content with styling, making maintenance more challenging. <p style="color: blue;">This is a blue-colored text.</p> |
<style> element inside the <head> |
CSS rules are placed within the <style> element inside the <head> section of an HTML document. This method is suitable for single-document styling. <head> <style> p { color: red; } </style> </head> |
<link> |
CSS rules are placed in a separate file (typically with a .css extension). This file is then linked to the HTML document using the <link> element. This method is the most efficient for large websites as it allows for a consistent look and feel across multiple pages. <head> <link rel="stylesheet" href="styles.css"> </head> |
@import |
CSS can be imported into another CSS file. This is useful for modularizing CSS or using libraries. @import url('another-styles.css'); |
var() |
CSS variables, also known as custom properties, allow you to store specific values for reuse throughout the stylesheet. They are prefixed with -- and can be accessed using the var() function. :root { --main-color: pink; } body { background-color: var(--main-color); } |
ELEMENT |
DESCRIPTION |
EXAMPLE |
& |
Represents the ampersand symbol. Since & is used to initiate an entity, it must be encoded to display as a character in HTML. |
AT&T |
Less Than (<) and Greater Than (>) | < and > |
Represents the less than and greater than symbols. They are encoded because they are used in HTML tags. |
if (a < b) { ... } |
Quotation Mark (") | " |
Represents the double quotation mark. Useful within attributes to prevent ending them prematurely. <a title="This is a "title"">Link</a> |
" |
Apostrophe (') | ' |
Represents the apostrophe or single quotation mark. (in HTML4 it's ') |
It's a sunny day. |
Non-Breaking Space | |
Represents a space that prevents an automatic line break at its position. |
Hello World |
Copyright Symbol (©) | © |
Represents the copyright symbol. |
© 2023 Company Name |
Euro Symbol (€) | € |
Represents the euro currency symbol. |
Price: 50€ |
SUGGESTIONS
We would love to hear from you |
SUBSCRIBE
To enjoy more benefits |