New Standards
Jump to navigation
Jump to search
Experimental page for developing and testing new standards and also to understand the capabilities of this site.
Don't Use Them: Until these standards are sufficiently refined and accepted by the community, don’t use them.
HTML Tags
There are a lot of HTML tags. For obvious reasons, many tags do not work on MediaWiki-based sites. Here is a list of tags, do they work on this site and some description
| Tag | It works? | Description |
|---|---|---|
<!-- … --> |
Yes | Defines a comment. |
<!DOCTYPE> |
No | Defines the document type. |
<a> |
No | Defines a hyperlink. Doesn’t work because MediaWiki-based sites use their own linking system using square brackets. |
<abbr> |
Yes | Defines an abbreviation or an acronym. Adds a dotted underline and changes the cursor to a question mark cursor on hover. |
<address> |
No | Defines contact information for the author/owner of a document. |
<area> |
No | Defines an area inside an image map. |
<article> |
No | Defines an article. |
<aside> |
No | Defines content aside from the page content. |
<audio> |
No | Defines embedded sound content. |
<b> |
Yes | Defines bold text. |
<base> |
No | Specifies the base URL/target for all relative URLs in a document. WARNING: If you use this tag and enter the href attribute into it OR somewhere on the page after this tag is specified (even as plain text, even with spaces and even if base tag is wrapped in a nowiki tag), this will lead to the site restricting your access. You will not be blocked, the site simply does not allow this part of the code to be on the page. |
<bdi> |
Yes | Isolates a part of text that might be formatted in a different direction from other text outside it. |
<bdo> |
Yes | Overrides the current text direction. |
<big> |
Yes | Not supported in HTML5. Defines big text. |
<blockquote> |
Yes | Defines a section that is quoted from another source. |
<body> |
No | Defines the document’s body. |
<br> |
Yes | Defines a single line break. |
<button> |
No | Defines a clickable button. |
<canvas> |
No | Used to draw graphics, on the fly, via scripting. |
<caption> |
Yes | Defines a table caption. Notice: This tag has a dark text color that blends with the background. |
<center> |
Yes | Not supported in HTML5. Defines centered text. |
<cite> |
Yes | Defines the title of a work. |
<code> |
Yes | Defines a piece of computer code. |
<col> |
No | Specifies column properties for each column within a <colgroup> element. |
<colgroup> |
No | Specifies a group of one or more columns in a table for formatting. |
<data> |
Yes | Adds a machine-readable translation of a given content. |
<datalist> |
No | Specifies a list of pre-defined options for input controls. |
<dd> |
Yes | Defines a description/value of a term in a description list. |
<del> |
Yes | Defines strikethrough text. |
<details> |
No | Defines additional details that the user can view or hide. |
<dfn> |
Yes | Specifies a term that is going to be defined within the content. |
<dialog> |
No | Defines a dialog box or window. |
<div> |
Yes | Defines a section in a document. |
<dl> |
Yes | Defines a description list. |
<dt> |
Yes | Defines a term/name in a description list. |
<em> |
Yes | Defines emphasized text. |
<embed> |
No | Defines a container for an external application. WARNING: If you use this tag and enter the src attribute into it OR somewhere on the page after this tag is specified (even as plain text, even with spaces and even if base tag is wrapped in a nowiki tag), this will lead to the site restricting your access. You will not be blocked, the site simply does not allow this part of the code to be on the page. |
<fieldset> |
No | Groups related elements in a form. |
<figcaption> |
No | Defines a caption for a <figure> element. |
<figure> |
No | Specifies self-contained content. |
<font> |
Yes | Not supported in HTML5. Defines font, color, and size for text. |
<footer> |
No | Defines a footer for a document or section. |
<form> |
No | Defines an HTML form for user input. |
<h1> to <h6> |
Yes | Defines HTML headings. |
<head> |
No | Contains metadata/information for the document. |
<header> |
No | Defines a header for a document or section. |
<hgroup> |
No | Defines a header and related content. |
<hr> |
Yes | Creates a horizontal line. |
<html> |
No | Defines the root of an HTML document. |
<i> |
Yes | Makes the content italic. |
<iframe> |
No | Defines an inline frame. |
<img> |
No | Defines an image. Doesn’t work because MediaWiki-based sites use their own image system using square brackets. |
<input> |
No | Defines an input control. |
<ins> |
Yes | Defines a text that has been inserted into a document. |
<kbd> |
Yes | Defines keyboard input. |
<label> |
No | Defines a label for an <input> element. |
<legend> |
No | Defines a caption for a <fieldset> element. |
<li> |
Yes | Defines a list item. |
<link> |
No | Defines the relationship between a document and an external resource. |
<main> |
No | Specifies the main content of a document. |
<map> |
No | Defines an image map. |
<mark> |
Yes | Defines marked/highlighted text. |
<menu> |
No | Defines an unordered list. |
<meta> |
No | Defines metadata about an HTML document. |
<meter> |
No | Defines a scalar measurement within a known range (a gauge). |
<nav> |
No | Defines navigation links. |
<noscript> |
No | Defines an alternate content for users that do not support client-side scripts. |
<object> |
No | Defines a container for an external application. |
<ol> |
Yes | Defines an ordered list. |
<optgroup> |
No | Defines a group of related options in a drop-down list. |
<option> |
No | Defines an option in a drop-down list. |
<output> |
No | Defines the result of a calculation. |
<p> |
Yes | Defines a paragraph. |
<param> |
No | Defines a parameter for an object. |
<picture> |
No | Defines a container for multiple image resources. |
<pre> |
Yes | Defines preformatted text. |
<progress> |
No | Represents the progress of a task. |
<q> |
Yes | Defines a short quotation. |
<rp> |
Yes | Defines what to show in browsers that do not support ruby annotations. |
<rt> |
Yes | Defines an explanation/pronunciation of characters (for East Asian typography). |
<ruby> |
Yes | Defines a ruby annotation (for East Asian typography). |
<s> |
Yes | Defines text that is no longer correct. |
<samp> |
Yes | Defines sample output from a computer program. |
<script> |
No | Defines a client-side script. |
<search> |
No | Defines a search section. |
<section> |
No | Defines a section in a document. |
<select> |
No | Defines a drop-down list. |
<small> |
Yes | Defines smaller text. |
<source> |
No | Defines multiple media resources for media elements (<video> and <audio>). |
<span> |
Yes | Defines a section in a document. |
<strike> |
Yes | Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text. |
<strong> |
Yes | Defines important text. |
<style> |
No | Defines style information for a document. |
<sub> |
Yes | Defines subscripted text. |
<summary> |
No | Defines a visible heading for a <details> element. |
<sup> |
Yes | Defines superscripted text. |
<svg> |
No | Defines a container for SVG graphics. |
<table> |
Yes | Defines a table. |
<tbody> |
No | Groups the body content in a table. |
<td> |
Yes | Defines a cell in a table. |
<template> |
No | Defines a container for content that should be hidden when the page loads. |
<textarea> |
No | Defines a multiline input control (text area). |
<tfoot> |
No | Groups the footer content in a table. |
<th> |
Yes | Defines a header cell in a table. |
<thead> |
No | Groups the header content in a table. |
<time> |
Yes | Defines a specific time (or datetime). |
<title> |
No | Defines a title for the document. |
<tr> |
Yes | Defines a row in a table. |
<track> |
No | Defines text tracks for media elements (<video> and <audio>). |
<tt> |
Yes | Not supported in HTML5. Defines teletype text. |
<u> |
Yes | Emphasizes text. |
<ul> |
Yes | Defines an unordered list. |
<var> |
Yes | Defines a variable. |
<video> |
No | Defines embedded video content. |
<wbr> |
Yes | Defines a possible line-break. Can be used instead of ­. |
Inline CSS
Functions
| Functions | It works? | Description | Browser support | ||
|---|---|---|---|---|---|
abs() |
N/A | Returns the absolute value of the argument, as the same type as the input. | Chrome | Firefox | Safari |
acos() |
Yes | Trigonometric function that returns the inverse cosine of a number between -1 and 1. The function contains a single calculation that returns the number of radians representing an <angle> between 0deg and 180deg. | Chrome | Firefox | Safari |
anchor-size() |
Yes | Enables setting anchor-positioned element’s size, position, and margins relative to the dimensions of anchor elements. It returns the <length> of a specified side of the target anchor element. anchor-size() is only valid when used within the value of anchor-positioned elements’ sizing, inset, and margin properties. | Chrome | Firefox | Safari |
anchor() |
Yes | Can be used within an anchor-positioned element's inset property values, returning a length value relative to the position of the edges of its associated anchor element. | Chrome | Firefox | Safari |
asin() |
Yes | Trigonometric function that returns the inverse sine of a number between -1 and 1. The function contains a single calculation that returns the number of radians representing an <angle> between -90deg and 90deg. | Chrome | Firefox | Safari |
atan() |
Yes | Trigonometric function that returns the inverse tangent of a number between -∞ and +∞. The function contains a single calculation that returns the number of radians representing an <angle> between -90deg and 90deg. | Chrome | Firefox | Safari |
atan2() |
Yes | Trigonometric function that returns the inverse tangent of two values between -∞ and +∞. The function accepts two arguments and returns the number of radians representing an <angle> between -180deg and 180deg. | Chrome | Firefox | Safari |
attr() |
N/A | Used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the var() function substitutes a custom property value. It can also be used with pseudo-elements, in which case the attribute's value on the pseudo-element's originating element is returned. | Chrome | Firefox | Safari |
blur() |
No | insecure input Applies a Gaussian blur to the input image. |
Chrome | Firefox | Safari |
brightness() |
No | insecure input Applies a linear multiplier value on an element or an input image, making the image appear brighter or darker. |
Chrome | Firefox | Safari |
calc-size() |
Yes | Allows you to perform calculations on intrinsic size values such as auto, fit-content, and max-content; this is not supported by the regular calc() function. | Chrome | Firefox | Safari |
calc() |
Yes | Lets you perform calculations when specifying CSS property values. It can be used with <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer>, and <color-function> values. | Chrome | Firefox | Safari |
circle() |
Yes | Defines a circle using a radius and a position. It is one of the <basic-shape> data types. | Chrome | Firefox | Safari |
clamp() |
Yes | Clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value. | Chrome | Firefox | Safari |
color-mix() |
Yes | The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount. | Chrome | Firefox | Safari |
color() |
Yes | The color() functional notation allows a color to be specified in a particular, specified color space rather than the implicit sRGB color space that most of the other color functions operate in. | Chrome | Firefox | Safari |
conic-gradient() |
Yes | Creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>. | Chrome | Firefox | Safari |
contrast() |
No | insecure input Adjusts the contrast of the input image. |
Chrome | Firefox | Safari |
cos() |
Yes | Trigonometric function that returns the cosine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians. That is, cos(45deg), cos(0.125turn), and cos(3.14159 / 4) all represent the same value, approximately 0.707. | Chrome | Firefox | Safari |
counter() |
N/A | Returns a string representing the current value of the named counter, if there is one. | Chrome | Firefox | Safari |
counters() |
N/A | Enables combining markers when nesting counters. The function returns a string that concatenates the current values of the named and nested counters, if any are present, with the string provided. The third, optional parameter enables defining the list style. | Chrome | Firefox | Safari |
cross-fade() |
N/A | Can be used to blend two or more images at a defined transparency. It can be used for many basic image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient. | Chrome | Firefox | Safari |
cubic-bezier() |
Yes | Creates a smooth transition using a cubic Bézier curve. As an <easing-function>, it can be used to smooth out the start and end of the interpolation. | Chrome | Firefox | Safari |
device-cmyk() |
N/A | The device-cmyk() functional notation is used to express CMYK colors in a device dependent way, specifying the cyan, magenta, yellow, and black components. | Chrome | Firefox | Safari |
drop-shadow() |
No | insecure input Applies a drop shadow effect to the input image. |
Chrome | Firefox | Safari |
element() |
N/A | Defines an <image> value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated. | Chrome | Firefox | Safari |
ellipse() |
Yes | The ellipse() CSS function is one of the <basic-shape> data types. | Chrome | Firefox | Safari |
env() |
Yes | Can be used to insert the value of a user-agent defined environment variable into your CSS, in a similar fashion to the var() function and custom properties. The difference is that, as well as being user-agent defined rather than author-defined, environment variables are globally scoped to a document, whereas custom properties are scoped to the element(s) on which they are declared. | Chrome | Firefox | Safari |
exp() |
Yes | Exponential function that takes a number as an argument and returns the mathematical constant e raised to the power of the given number. | Chrome | Firefox | Safari |
fit-content() |
Yes | Clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)). | Chrome | Firefox | Safari |
grayscale() |
No | insecure input Converts the input image to grayscale. |
Chrome | Firefox | Safari |
hsl() |
Yes | The hsl() functional notation expresses a color in the sRGB color space according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency. | Chrome | Firefox | Safari |
hue-rotate() |
No | insecure input Rotates the hue of an element and its contents. |
Chrome | Firefox | Safari |
hwb() |
Yes | The hwb() functional notation expresses a color in the sRGB color space according to its hue, whiteness, and blackness. An optional alpha component represents the color's transparency. | Chrome | Firefox | Safari |
hypot() |
Yes | Exponential function that returns the square root of the sum of squares of its parameters. If a single parameter is provided, the result is the absolute value of its input. hypot(2em) and hypot(-2em) both resolve to 2em. |
Chrome | Firefox | Safari |
image-set() |
No | The image-set() CSS functional notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens. | Chrome | Firefox | Safari |
image() |
No | The image() CSS function defines an <image> in a similar fashion to the url() function, but with added functionality including specifying the image's directionality, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered. | Chrome | Firefox | Safari |
inset() |
Yes | Defines a rectangle at the specified inset distances from each side of the reference box. | Chrome | Firefox | Safari |
invert() |
No | Inverts the color samples in the input image. | Chrome | Firefox | Safari |
lab() |
Yes | The lab() functional notation expresses a given color in the CIE L*a*b* color space. | Chrome | Firefox | Safari |
layer() |
No | Used along with the @import at-rule to put the imported resource in a separate named cascade layer.. | Chrome | Firefox | Safari |
lch() |
Yes | The lch() functional notation expresses a given color using the LCH color space, which represents lightness, chroma, and hue. It uses the same L axis as the lab() color function of the CIELab color space, but it uses the polar coordinates C (Chroma) and H (Hue). | Chrome | Firefox | Safari |
light-dark() |
Yes | The light-dark() CSS <color> function enables setting two colors for a property – returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme – without needing to encase the theme colors within a prefers-color-scheme media feature query. Users are able to indicate their color-scheme preference through their operating system settings (e.g., light or dark mode) or their user agent settings. The light-dark() function enables providing two color values where any <color> value is accepted. The light-dark() CSS color function returns the first value if the user's preference is set to light or if no preference is set and the second value if the user's preference is set to dark. | Chrome | Firefox | Safari |
linear-gradient() |
Yes | Creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>. | Chrome | Firefox | Safari |
linear() |
Yes | Creates a transition curve that progresses uniformly between points. As an <easing-function>, it creates transitions where the interpolation occurs at a constant rate from beginning to end. | Chrome | Firefox | Safari |
log() |
Yes | Returns the logarithm of a number. | Chrome | Firefox | Safari |
matrix() |
Yes | Defines a homogeneous 2D transformation matrix. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
matrix3d() |
Yes | Defines a 3D transformation as a 4x4 homogeneous matrix. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
max() |
Yes | Lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The max() function can be used anywhere a <length>, <frequency>, <angle>, | Chrome | Firefox | Safari |
min() |
Yes | Lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length>, <frequency>, <angle>, | Chrome | Firefox | Safari |
minmax() |
Yes | Defines a size range greater than or equal to min and less than or equal to max. It is used with CSS grids. | Chrome | Firefox | Safari |
mod() |
Yes | Returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The modulus is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the divisor. | Chrome | Firefox | Safari |
oklab() |
Yes | The oklab() functional notation expresses a given color in the Oklab color space, which attempts to mimic how color is perceived by the human eye. | Chrome | Firefox | Safari |
oklch() |
Yes | The oklch() functional notation expresses a given color in the Oklab color space. oklch() is the cylindrical form of oklab(), using the same L axis, but with polar Chroma (C) and Hue (h) coordinates. | Chrome | Firefox | Safari |
opacity() |
No | insecure input Applies transparency to the samples in the input image. |
Chrome | Firefox | Safari |
paint() |
No | Defines an <image> value generated with a PaintWorklet. | Chrome | Firefox | Safari |
palette-mix() |
N/A | Can be used to create a new font-palette value by blending together two font-palette values by specified percentages and color interpolation methods. | Chrome | Firefox | Safari |
path() |
Yes | Accepts an SVG path string, and is used in the CSS shapes and CSS motion path modules to enable a shape to be drawn. The path() function is a <basic-shape> data type value. It can be used in the CSS offset-path and clip-path properties and in the SVG d attribute. | Chrome | Firefox | Safari |
perspective() |
Yes | Defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
polygon() |
Yes | One of the <basic-shape> data types. It's used to draw a polygon by providing one or more pairs of coordinates, each of which represents a vertex of the shape. | Chrome | Firefox | Safari |
pow() |
Yes | Exponential function that returns the value of a base raised to the power of a number. | Chrome | Firefox | Safari |
radial-gradient() |
Yes | Creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the <gradient> data type, which is a special kind of <image>. | Chrome | Firefox | Safari |