DEV Community: Share Point Anchor

HTML Keygen Tag

Share Point Anchor — Mon, 01 Mar 2021 06:10:54 +0000

In HTML, the Keygen tag is used to generate an encryption key for passing the encrypted data to a server. It is one of the new sectioning elements in HTML 5. The main purpose of the element is to provide a secure way to authenticate users.

When an HTML < form> is submitted, the browser will generate two keys. One is a private key and another one is a public key. The private key stored locally , and the public key is sent to the server. The public key is used to generate a client certificate to authenticate the user for future purposes.

Estimated reading time: 3 minutes

Syntax:

The tag doesn’t require the closing tag in HTML. But in XHTML it contains both the opening tag and closing tag.


<keygen name= "name">

HTML Tag Characteristics:

th, td{ padding: 20px; }

Sample of the HTML Tag:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <keygen> Tag</title>
  </head>
  <body>
<h2>Example of the HTML <keygen> Tag</h2>
    <form action="/form/submit" method="get">
      <keygen name="rsaPublicKey" keytype="RSA">
        User Name:
        <input type="text" name="usr_name">
        <input type="submit">
    </form>
  </body>
</html>

Note : The functionality of the element in HTML depended on the web browser and the corresponding web server program.

Result:

Result

Download Sample File:

HTML-keygen-tag Download

Attributes:

The HTML keygen tag supports both the Global Attributes and Event Attributes.

th, td{ padding: 20px; }

Attribute	Value	Description
autofocus	autofocus	This attribute is used to define the loading of the page the element must automatically receive a focus. Not supported in Internet Explorer and Firefox.
challenge	challenge	It defines the call string , that is passed along with the public key. The attribute value is any text string. If the attribute isn’t specified, the default is an empty string.
disabled	disabled	This indicates that the element must be disabled.
form	form_id	The form element will help to indicate the identifier of the form or forms to which the element belongs. Not supported in Internet Explorer.
keytype		It defines the key-encryption algorithm.
rsa	From the key type attribute, the user can choose between high and medium security (the default value).
dsa	Used to select the key size.
ec	The user can choose between high and medium security. Not supported in Internet Explorer and Safari.
name	name	Helps to define the name of the element.

Browser Support:

Result

HTML Form Tag
HTML Data List Tag
Basic HTML Definitions and Usages in the Real World
HTML Applet Tag
HTML Tag

The post HTML Keygen Tag appeared first on Share Point Anchor.

HTML IsIndex Tag

Share Point Anchor — Thu, 25 Feb 2021 05:10:59 +0000

In HTML, the IsIndex tag is used to display the search string in the current document. It provides a single-line text input on a page to query a document. This tag uses the “prompt” and “action” attributes.

Note : The tag is deprecated in HTML , and it is not available in HTML 5.

The tag can be placed anywhere in the HTML document, but it is recommended to integrate it within the element. This tag is mainly used to search for any specific word in a long article but it is no more useful these days.

Info : Nowadays all the browsers contain the search feature by pressing the CTRL + F keys, it will let you search the word.

Estimated reading time: 3 minutes

Syntax:

The tag does not contain the closing tag in HTML. But in XHTML it consists of both the starting tag and the ending tag.


<isindex prompt=" " action=" ">

Sample of the HTML Tag:


<!DOCTYPE html>
<html>
  <head>
    <isindex prompt="Search your document">
  </head>
</html>

Result:

All major browsers have now removed the tag , so avoid using it.

Tips : You can use the tag with the tag, to define a single line input field that executes the same function of the tag.

Example:

Here is the sample for creating a search box by using the and tags with the element.


<!DOCTYPE html>
<html>
  <head>
    <form action="/search">
  <hr>
  <label>
    Search Document
    <input name="isindex">
  </label>
  <hr>
</form>
  </head>
<body>
<h2>This is the sample heading</h2>
<p>This is the sample paragraph</p>
</body>
</html>

Result:

Result

Attributes:

The HTML IsIndex tag supports the Global Attributes and the Event Attributes.

th, td{ padding: 20px; }

Attribute	Value	Description
prompt	hint-text	It is used to specify the text string that is displayed in front of the search query input field. If this attribute is not specified, the default browser will display its own text.
action	URL	It defines the URL programs , which perform the search.

Browser Support:

Browser support

HTML Embed Tag
HTML Emphasis Tag
Basic HTML Definitions and Usages in the Real World
HTML Directory Tag
HTML Column Tag

The post HTML IsIndex Tag appeared first on Share Point Anchor.

HTML Legend Tag

Share Point Anchor — Thu, 25 Feb 2021 05:03:21 +0000

The Legend tag is used to define the caption or title for its parent element in an HTML document. It is the first child element of the tag. The tag is used to assign the caption for the element.

This tag is also used to specify the titles for form sections being an alternative to the

-
heading

tags. By using the tag with elements, it is easy to understand the purpose of grouped form elements.

Estimated reading time: 4 minutes

Syntax:

This tag contains both the starting tag and the ending tag. The content is written between these two tags.


<legend> Title </legend>

HTML Tag Characteristics:

th, td{ padding: 20px; }

Sample of the HTML Tag:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <legend> Tag</title>
  </head>
  <body>
<h2>Example of HTML <legend> Tag</h2>
    <form>
      <fieldset>
        <legend>Personal Information:</legend>
        First Name:
        <input type="text">
        <br>
    <br> Last Name:
        <input type="text">
        <br>
        <br> E-mail ID:
        <input type="email">
        <br>
        <br> Date of Birth:
        <input type="number">
        <br/>
        <br/> Birth Place:
        <input type="text">
      </fieldset>
    </form>
  </body>
</html>

Result:

Result

Download Sample File:

HTML-legend-tag Download

Use CSS property to style an HTML Tag:

You can also use the CSS styling property to change the initial appearance of the legend.

Sample of the HTML tag with CSS:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <legend> Tag</title>
    <style>
      form {
        width: 55%;
      }
      fieldset {
        padding: 25px;
      }
      label {
        display: inline-block;
        width: 95px;
        text-align: right;
      }
      legend {
        display: block;
        padding: 15px;
        margin-bottom: 10px;
        background-color: #43156D;
        color: white;
      }
    </style>
  </head>
  <body>
   <h2>Example of HTML <legend> Tag with CSS</h2>
    <form>
      <fieldset>
        <legend>Personal data:</legend>
        <label>Name:</label>
        <input type="text">
        <br/>
        <br/>
        <label>E-mail:</label>
        <input type="email">
        <br/>
        <br/>
        <label>Date of birth:</label>
        <input type="number">
        <br/>
        <br/>
        <label>Birth Place:</label>
        <input type="text">
      </fieldset>
    </form>
  </body>
</html>

Result:

Result

Attributes:

The HTML legend tag supports both the Global Attributes and Event Attributes.

th, td{ padding: 20px; }

Attributes	Value	Description
align

top
bottom
left
right | This value helps to define the alignment of the caption. It is not supported in HTML 5. |

Styling Methods for Tag:

You can use the following properties to style an HTML legend tag.

Properties to style the visual weight/emphasis/size of the text in tag:

CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
CSS font-size – This CSS property will help to set the size of the font.
CSS font-weight – This CSS property used to define whether the font should be bold or thick.
CSS text-transform – This CSS property will control the text case and capitalization.
CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.

Styles to coloring the text in Tag:

CSS color – This CSS property will specify the color of the text content and decorations.
CSS background-color – This CSS property helps to set the background color of an element.

Text layout styles for Tag:

CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
*CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
CSS white-space – This CSS property describes how white-space inside an element is handled.
CSS word-break – This CSS property decides where the lines should be broken.

Other Properties for Tag:

CSS text-shadow – This CSS property helps to add the shadow to text.
CSS text-align-last – This CSS property will set the alignment of the last line of the text.
CSS line-height – This CSS property defines the height of a line.
CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
CSS word-spacing – This CSS property specifies the spacing between every word.

Browser Support:

Browser Support

HTML Caption Tag
HTML Figure Caption Tag
Basic HTML Definitions and Usages in the Real World
HTML Figure Tag
HTML Code Tag

The post HTML Legend Tag appeared first on Share Point Anchor.

HTML Image Tag

Share Point Anchor — Thu, 25 Feb 2021 05:02:03 +0000

In HTML, the Image tag is used to display the image on the web page. Images are not directly inserted into the document, they are linked to the HTML pages. The tag creates a holding space for the referenced image. It can be styled and manipulated using CSS properties.

There are two required attributes for a tag. They are:
- Src attribute – Define the path of the image.
- Alt attribute – It specifies the alternate text for the image.

Tips : You can also make the HTML images clickable , by using the tag inside the tag.

Estimated reading time: 6 minutes

Syntax:

The tag does not require the closing tag in HTML. But in XHTML , it contains both the opening tag and closing tag.


<img src="URL" alt="text">

Sample of the HTML Tag:

Here is the example for HTML image tag.


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <img> Tag</title>
  </head>
  <body>
    <h2>Example of the HTML <img> Tag</h2>
    <p>Share Ponit Anchor</p>
    <img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo">
  </body>
</html>

Try it Yourself Online

Result:

Result

Download Sample File:

HTML-img-tag Download

Use CSS property to style the tag:

You can also use the CSS styling property to change the initial appearance of an image.

Sample of the tag with CSS property :


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <img> Tag</title>
    <style>
      img {
      border-radius: 10%;
      border: 2px dashed #C40655;
      width: 250px;
      display: block;
      margin: 0 auto;
      }
    </style>
  </head>
  <body>
   <h2>Example of the HTML <img> Tag</h2>
    <div>
     <img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo">
    </div>
  </body>
</html>

Try it Yourself Online

Result:

Result

Src and Alt Attributes:

The “src” attribute stands for source. This attribute tells the browser where to find the image you want to display. The value of the href attribute can be either the file name or its URL.

The “alt” attribute stands for alternate text. This attribute is used to inform the browser that if it can’t find the image, then just display the given text.

Tips : It is recommended to include keywords in “alternate text” , it will improve the ranking of the website in search engines.

Sample of the HTML tag with the src and alt attributes:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <img> Tag</title>
  </head>
  <body>
  <h2>Example of the HTML <img> Tag</h2>
    <img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo" width="256" height="256">
  </body>
</html>

Try it Yourself Online

Note : Always try to insert the image with height and width, else it may flicker while displaying on a webpage.

Result:

Result

HTML tag with “loading” Attribute:

In HTML, there is a new loading attribute is available to deferring image and iframe loading until they are close to being shown. This is one of the parts of Chromium (as of v76).

The loading attribute will support the following values:

Lazy – It delays the load until the image or iframe reaches a distance threshold from the viewport.
Eager – This value loads the resource immediately.
Auto – It is the default behavior , loads the resource.

Supported Images Formats:

The HTML standard doesn’t list what image formats to support, so each user agent supports different formats.

Here is the image file formats that are most commonly used on the web page:

th, td{ padding: 20px; }

Abbreviation	File Format	MIME Type	File Extensions	Browser Compatibility
APNG	Animated Portable Network Graphics	image/apng	.apng

Chrome
Edge
Firefox
Opera
Safari | | BMP | Bitmap file | image/bmp | .bmp |
Chrome
Edge
Firefox
Opera
Safari | | GIF | Graphics Interchange Format | image/gif | .gif |
Chrome
Edge
Firefox
Opera
Safari | | ICO | Microsoft Icon | image/x-icon |
.ico
.cur |
Chrome
Edge
Firefox
Opera
Safari | | JPEG | Joint Photographic Expert Group image | image/jpeg |
.jpg
.jpeg
.jfif
.pjpeg
.pjp |
Chrome
Edge
Firefox
Opera
Safari | | PNG | Portable Network Graphics | image/png | .png |
Chrome
Edge
Firefox
Opera
Safari | | SVG | Scalable Vector Graphics | image/svg+xml | .svg |
Chrome
Edge
Firefox
Opera
Safari | | TIFF | Tagged Image File Format | image/tiff |
.tif
.tiff | None. Built-in; add-ons required | | WebP | Web Picture format | image/webp | .webp |
Chrome
Edge
Firefox
Opera |

Image Loading Errors:

There may occur some errors while loading an image. This can happen in the following situations:

The “src” attribute is empty (” “) or “Null”.
The “src” URL is the same as the URL of the page the user is currently on.
Some corruption of the image prevents it from being loaded.
The metadata of the image is corrupted in such a way that makes it impossible to retrieve its dimensions, and there are no dimensions specified in the attributes of the tag.
The file format is not supported by the user agent.

Attributes:

The HTML image tag supports the Global Attributes and the Event Attributes.

th, td{ padding: 20px; }

Attribute	Value	Description
align

left
right
top
bottom
middle | This attribute defines the alignment of the image in reference to surrounding elements. Not supported in HTML 5. | | alt | text | It specifies the alternate text for the image. | | border | pixels | Used to define the width of the border around the image. It is not supported in HTML 5. | | crossorigin | | | This attribute will help to specify whether the CORS is used when loading the image. Images, uploaded via CORS, can be used in the element without limiting the functionality of the latter. | | anonymous | CORS requests from this element will not pass credentials. | | use-credentials | The CORS requests from this element will pass credentials. It is a new attribute in HTML 5. | | height | pixels | This value specifies the height of the image. | | hspace | pixels | It is used to define the spaces at the left and right sides of the image. Not supported in HTML5. | | ismap | ismap | This tag specifies that the contents of the tag are a server-side image map. | | longdesc | URL | It is used to specify the URL address with a detailed description of the image ( For a short description of the image, use the alt attribute). Not supported in HTML5. | | src | URL | This value defines the source of the image. | | usemap | #mapname | Helps to define a link to the element , which contains the coordinates for the client map image. | | vspace | pixels | It specifies the spaces at the top and bottom of the image. Not supported in HTML5. | | width | pixels | This value defines the width of the image. |

Deprecated Attributes:

Here the list of deprecated HTML attributes and its alternate methods are listed below:

th, td{ padding: 20px; }

Attribute	Values	Description	Alternate
align

left
right
top
bottom
middle | This attribute will help to specify the alignment of the image in reference to surrounding elements. Centers the HTML image of the image in reference to surrounding elements. | The CSS vertical-align and/or float properties. | | border | pixels | It defines the width of the border around the image. | The CSS border property. | | hspace | | This is used to specify the horizontal spaces around the image. | Use the CSS margin property instead. | | name | | Specifies a name for the element | You can use the “id” attribute. | | vspace | pixels | This will define spaces at the top and bottom of the image. | Use the CSS margin property instead. |

Browser Support:

Browser Support

HTML
Definition Description Tag
HTML Center Tag
Basic HTML Definitions and Usages in the Real World
HTML Code Tag
HTML Aside Tag

The post HTML Image Tag appeared first on Share Point Anchor.

CSS background-origin property

Share Point Anchor — Thu, 25 Feb 2021 05:01:08 +0000

The background-origin property is used to specify the background positioning area of the background image. It is one of the CSS3 properties.

This property allows you to specify whether the background will be positioned relative to the “content box”, “border box”, or the “padding box”.

Note : If the background-attachment is “ fixed “, then this property will be ignored and will not have an effect.

Background-origin property accepts the following values.
- padding-box
- border-box
- content-box
- initial
- inherit

Background-Origin property characteristics:

Syntax:


background-origin: padding-box | border-box | content-box | initial | inherit;

Values:

Value	Description
border-box	It is the default value. The background-position is relative to the border and the background-image starts from the upper left corner of the padding edge.
padding-box	With this value, the background-position is relative to the padding box and the background-image starts from the upper left corner of the border.
content-box	The background-position is relative to the content box and the background-image starts from the upper left corner of the content.
initial	It will set the property to its default value.
inherit	Inherits the property from its parent element.

Example of the background-origin property:

In the following code, we use the background-origin property for your reference.


<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {

        border: 5px dashed #1E90FF;

        padding: 35px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");

        background-repeat: no-repeat;

        background-origin: padding-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-origin property example</h2>

    <p>Here the background-origin is set to "border-box".</p>

    <div class="example1">

      <h2>Hello world.</h2>

      <p> Have a great day!!</p>

    </div>
  </body>
</html>

Try it Yourself Online

Result:

By running the above code, you will get the result as shown in the below image.

Result of background-origin property

Example of background-origin property with the “padding-box” and “content-box” values:

The following example code Wil show the difference between padding-box and content-box.


<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {

        border: 5px dashed #0000CD;

        padding: 35px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");

        background-repeat: no-repeat;

        background-origin: padding-box;

      }
      .example2 {

        border: 5px dashed #0000CD;

        padding: 35px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");

        background-repeat: no-repeat;

        background-origin: content-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-origin property example</h2>

    <p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>

    <div class="example1">

      <h2>Hello world</h2>

      <p> Have a great day!!</p>

    </div>

    <p>Here the background-origin is set to "content-box".</p>

    <div class="example2">

      <h2>Hello world</h2>

      <p> Have a great day!!</p>

    </div>
  </body>
</html>

Try it Yourself Online

Result:

After running the above code, you will get the output as shown in the below image.

Result of CSS background-origin property

Example of a background-origin property with different values:

In the below example, you will see how to set two background images.


<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {

        border: 5px double black;

        padding: 25px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");

        background-repeat: no-repeat;

        background-origin: content-box, border-box;

      }
      #example2 {

        border: 5px double black;

        padding: 25px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");

        background-repeat: no-repeat;

        background-origin: content-box, padding-box;

      }
      #example3 {

        border: 5px double black;

        padding: 25px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");

        background-repeat: no-repeat;

        background-origin: content-box, content-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-origin property example</h2>

    <p>Here the background-origin: content-box, border-box; is set:</p>

    <div id="example1">

      <h2>Hello World</h2>

      <p>The first background-image starts from the upper left corner of the border.</p>

      <p>The second background-image starts from the upper left corner of the content.</p>

    </div>

    <p>Here the background-origin: content-box, padding-box:</p>
    <div id="example2">

      <h2>Hello World</h2>

      <p>The first background image starts from the upper left corner of the padding edge.</p>

      <p>The second background-image starts from the upper left corner of the content.</p>

    </div>
    <p>Here the background-origin: content-box, content-box; is set:</p>

    <div id="example3">

      <h2>Hello World</h2>

      <p>Both background images start from the upper left corner of the content.</p>

    </div>
  </body>
</html>

Try it Yourself Online

Result:

After executing the above code, you will get the result as shown in the below image.

Background-origin property with different values

Browser-Support:

Browser-support

Read Ahead:

HTML Insert Tag

Share Point Anchor — Thu, 25 Feb 2021 04:55:33 +0000

The term stand for insert. This tag is mainly used to specify the text which has been inserted into an HTML document. In HTML, the insert tag is sometimes used along with the tag for a markup of deleted text.

By default, most of the browsers display the content between the tag as an underlined text. You can change this behavior by using the CSS text-decoration property.

This tag is found within the tag. Usually, the screen reading technology doesn’t announce the existence of the tag in the default configuration. So you can announce it by using the CSS content property with ::after and ::before pseudo-elements.

Estimated reading time: 3 minutes

Syntax:

The insert tag contains both the starting tag and the ending tag. The content is written between these tho tags.


<ins> Text </ins>

HTML Tag Characteristics:

th, td{ padding: 20px; }

Sample of the HTML Tag:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <ins> Tag</title>
  </head>
  <body>
<h2>Example of the HTML <ins> Tag</h2>
    <p>My favorite color is <del>violet</del> <ins>green</ins>․</p>
  </body>
</html>

Result:

Result

Download Sample File:

HTML-ins-tag Download

Use CSS property to style an HTML Tag:

You can use the CSS text-decoration properties to style the content within the tag.

Sample of HTML tag with CSS properties:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <ins> Tag</title>
    <style>
      ins {
        font-size: 16px;
        font-weight: italic;
        color: #C40655;
      }
      ins::before {
        content: " ~ ";
        width: 1px;
      }
    </style>
  </head>
  <body>
<h2>Example of the HTML <ins> Tag</h2>
    <p>
      <q>Always remember that you are absolutely unique. Just like everyone else.</q>
      <ins>Margaret Mead</ins>
    </p>
  </body>
</html>

Result:

Result

Attributes:

The HTML insert tag supports both the Global Attributes and the Event Attributes.

th, td{ padding: 20px; }

Attribute	value	Description
cite	URL	It will specify the URL of the document , which explains why the text was edited or deleted.
datetime	YYYY-MM-DDThh:mm:ssTZD	Helps to define the date and time of the deleted text.

Browser Support:

Browser Support

HTML Embed Tag
HTML Area Tag
Basic HTML Definitions and Usages in the Real World
HTML Tag
HTML Figure Tag

The post HTML Insert Tag appeared first on Share Point Anchor.

CSS animation-name property

Share Point Anchor — Thu, 25 Feb 2021 04:51:38 +0000

The CSS animation-name property is used to specify one or more names for the @keyframes animation. When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.

This is one of the CSS3 properties. Different animation properties can control the animation.

The CSS animation-name property accepts the following values.
- none
- keyframename
- initial
- inherit

Characteristics of animation-name property:

Syntax:


animation-name: keyframename | none | initial | inherit;

Values:

Value	Description
none	This is a default value and specifies that there will be no animation.
keyframename	It specifies the name of the animation.
initial	This value makes the property use its default val ue.
inherit	Inherits the property from its parent’s element.

Example of the animation-name property:

In the following code, the name of the animation is set as “ colors “.


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        padding: 50px;

        animation: element 4s infinite;

      }
      @keyframes element {
        0% {

          background-color: #BA55D3;

        }
        50% {

          background-color: #8A2BE2;

        }
        100% {

          background-color: #9400D3;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-name example</h2>

    <div>The name of the animation is set as "colors".</div>

  </body>
</html>

Result:

After executing the above code, you will get the result as shown in the below image.

Result of animation-name property

Browser-Support:

Browser-support

Related Articles:

CSS animation Property
CSS animation-direction property
animation-duration property
CSS animation-iteration-count property
CSS all Property

Frequently Asked Questions:

Describe the usage of animation-name property.

CSS animation-name property is used to specify one or more names for the @keyframes animation.

What is the default value of animation-name property?

The default value of an animation-name property is “ none “. It specifies that there will be no animation.

Define the syntax of animation-name property?

animation-name: keyframename | none | initial | inherit;

Is it possible to give multiple values in an animation property?

Yes, multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.

The post CSS animation-name property appeared first on Share Point Anchor.

HTML Dialog Tag

Share Point Anchor — Tue, 23 Feb 2021 20:43:51 +0000

HTML Dialog tag is used to create a new popup dialog box or alert box on a web page. You can create pop-up messages , alert messages , or forms by using this tag. It is the new sectioning element in HTML 5.

Normally, the dialog box is hidden from user view , you can activate it by using the “open” attribute. For styling the tag, you can use the CSS “::backdrop“ pseudo-element.

Info : If you need to display/hide the content within the tag, you must use the JavaScript API.

To combine the element within the dialog, it should be specified with the method=”dialog” attribute and the dialog tag is closed with the “returnValue“ attribute.

Estimated reading time: 5 minutes

Syntax:

The dialog contains both the starting tag and ending tag. The Content is written between these two tags.


<dialog open> Write your text here.. </dialog>

HTML Tag Characteristics:

th, td{ padding: 20px; }

Sample of HTML Tag:


<!DOCTYPE html> 
<html> 
    <head> 
        <title>HTML <dialog> Dialog Tag</title>       
    </head>
    <body> 
        <h2>Example of HTML <dialog> tag</h2> 
        <dialog open>Welcome to Share Point Anchor</dialog> 
    </body> 
</html>

Result:

Result

Download Sample File:

HTML-Dialog-Tag Download

Use CSS property to style an HTML Tag:


<!DOCTYPE html> 
<html> 
    <head> 
        <title>HTML <dialog> Dialog Tag</title>       
    </head>
 <style> 
            dialog { 
                color: #C40655;; 
                font-size:30px; 
                font-weight:bold; 
                font-style:italic; 
            } 
            body { 
                text-align:center; 
            } 
        </style>  
    <body> 
        <h2>Example of HTML <dialog> tag with CSS property</h2> 
        <dialog open>Welcome to Share Point Anchor</dialog> 
    </body> 
</html>

Result:

Result

HTML tag with JavaScript:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dialog> Dialog Tag</title>
    <style>
      dialog {
            width: 40%;
        color: Green;
        text-align:center; 
                font-size:30px; 
                font-weight:bold; 
                font-style:italic; 
      }
    </style>
  </head>
  <body>
    <div>
      <dialog id="DialogExample">
        <p>
          Welcome to Share Point Anchor
        </p>
        <button id="hide">Close dialog text</button>
      </dialog>
      <button id="show">Clik here to Open</button>
    </div>
    <script type="text/JavaScript">
      (function() { var dialog = document.getElementById('DialogExample'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })();
    </script>
  </body>
</html>

Result:

Result

Attributes:

The Dialog tag supports the global attributes and the event attributes in HTML.

th, td{ padding: 20px; }

Attribute	Value	Description
open	open	This attribute will idicate that the dialog box is active , and the user can interact with it.

Styling Methods for Tag:

You can use the following properties to style an HTML Dialog tag.

Properties to style the visual weight/emphasis/size of the text in tag:

CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
CSS font-size – This CSS property will help to set the size of the font.
CSS font-weight – This CSS property used to define whether the font should be bold or thick.
CSS text-transform – This CSS property will control the text case and capitalization.
CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.

Styles to coloring the text in Tag:

CSS color – This CSS property will specify the color of the text content and decorations.
CSS background-color – This CSS property helps to set the background color of an element.

Text layout styles for Tag:

CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
*CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
CSS white-space – This CSS property describes how white-space inside an element is handled.
CSS word-break – This CSS property decides where the lines should be broken.

Other Properties for Tag:

CSS text-shadow – This CSS property helps to add the shadow to text.
CSS text-align-last – This CSS property will set the alignment of the last line of the text.
CSS line-height – This CSS property defines the height of a line.
CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
CSS word-spacing – This CSS property specifies the spacing between every word.

Browser Support:

HTML
Definition Description Tag
HTML Center Tag
Basic HTML Definitions and Usages in the Real World
HTML Code Tag
HTML Aside Tag

The post HTML Dialog Tag appeared first on Share Point Anchor.

HTML Directory Tag

Share Point Anchor — Tue, 23 Feb 2021 20:43:31 +0000

In HTML, the

Directory tag is the container for a directory of titles, files or folders. The items inside the tag are defined in lists by using the

tag. By default, the list is marked with bullet points.

Note : The tag is deprecated in HTML , and it is no longer available in HTML 5.

Tips : You can use the

or
tag to create the list directory titles. Use the CSS list-style property to change the style of the lists.

Estimated reading time: 4 minutes

Syntax:

The directory tag contains both the starting tag and ending

tag. The content is written between these two tags.


<dir>
<li> write your content here </li>
</dir>

Sample of HTML Tag:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dir> Tag</title>
  </head>
  <body>
<h3>Example for <dir> Tag </h3>
    <dir>
    <li>Google Chrome </li>
    <li>Firefox</li>
    <li>Opera</li>
    <li>Safari</li>
    <li>Internet Explorer</li>
    </dir>
  </body>
</html>

Result:

Result

Download Sample File:

HTML-dir-Tag Download

Use CSS list-style property with HTML tag:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dir> Tag</title>
  </head>
   <style>
       dir{ 
          list-style: circle; 
        }
      </style>
  <body>
<h3>HTML <dir> Tag with CSS property</h3>
    <dir>
    <li>Google Chrome </li>
    <li>Firefox</li>
    <li>Opera</li>
    <li>Safari</li>
    <li>Internet Explorer</li>
    </dir>
  </body>
</html>

Result:

Result

Attributes:

The Directory tag supports the global attributes and the event attributes in HTML.

th, td{ padding: 20px; }

Attribute	Value	Description
compact	compact	It helps to specify that the list should render smaller than normal.
Not Supported in HTML 5.

Styling Methods for Tag:

You can use the following properties to style an HTML Directory tag.

Properties to style the visual weight/emphasis/size of the text in tag:

CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
CSS font-size – This CSS property will help to set the size of the font.
CSS font-weight – This CSS property used to define whether the font should be bold or thick.
CSS text-transform – This CSS property will control the text case and capitalization.
CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.

Styles to coloring the text in Tag:

CSS color – This CSS property will specify the color of the text content and decorations.
CSS background-color – This CSS property helps to set the background color of an element.

Text layout styles for Tag:

CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
*CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
CSS white-space – This CSS property describes how white-space inside an element is handled.
CSS word-break – This CSS property decides where the lines should be broken.

Other Properties for Tag:

CSS text-shadow – This CSS property helps to add the shadow to text.
CSS text-align-last – This CSS property will set the alignment of the last line of the text.
CSS line-height – This CSS property defines the height of a line.
CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
CSS word-spacing – This CSS property specifies the spacing between every word.

Browser Support:

Browser Support

HTML Center Tag
HTML Code Tag
Basic HTML Definitions and Usages in the Real World
HTML Aside Tag
HTML Details Tag

The post HTML Directory Tag appeared first on Share Point Anchor.

HTML Definition Tag

Share Point Anchor — Tue, 23 Feb 2021 20:43:00 +0000

The HTML Definition Tag used to define the term , that is specified in the context of the definition phrase or sentence. If a term is contained within the element then browsers understand that nearby text contains a definition of the term.

The tag, the

pair, or the tag is considered to be the term’s definition. Mostly the browsers will display the text found within the tag as italicized text. You can change this behavior with CSS property.

Estimated reading time: 5 minutes

Syntax:

The definition tag contains both the starting tag and ending tag. The content is written between these two tags.


<dfn> Definition term </dfn> - Definition.

HTML Tag Characteristics:

th, td{ padding: 20px; }

Sample of the HTML Tag:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dfn> Tag</title>
  </head>
  <body>
<h3>Example for Definition tag</h3>
    <p>
<dfn>HTML</dfn> - It is the technology used to create web pages
    </p>
  </body>
</html>

Result:

Result

Download Sample File:

HTML-dfn-tag Download

The term inside the tag can be any of the following:
- Just as the content of the element
- With the “title” attribute
- With a tag inside the tag
- With the “id” attribute, and you can refer back to the definition with the tag

Example of HTML tag with a “title” Attribute:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dfn> Tag</title>
  </head>
  <body>
<h3>HTML <dfn> Tag with "title" attribute</h3>
    <p>
    <dfn title="HyperText Markup Language">HTML</dfn> - It is the technology used to create web pages.
    </p>
  </body>
</html>

Result:

Result

Example of HTML tag with the tag:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <dfn> Tag</title>
  </head>
  <body>
<h3>HTML <dfn> Tag with <abbr> tag</h3>
    <p>
    <dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> - It is the technology used to create web pages.
    </p>
  </body>
</html>

Result:

Result

Example of HTML Tag with the “id” Attribute:


<!DOCTYPE html>
<html>
 <head>
    <title>HTML <dfn> Tag</title>
  </head>
<body>
<h3>HTML <dfn> Tag with "id" attribute</h3>
<p><dfn id="html-def">HTML</dfn> is the standard markup language for creating web pages.</p>

<p>This is some text...</p>
<p>This is some text...</p>
<p>This is some text...</p>
<p>This is some text...</p>
<p>This is some text...</p>
<p>This is some text...</p>
<p>Learn <a href="#html-def">HTML</a> now.</p>
</body>
</html>

Result:

Result

Attributes:

The Definition tag supports the global attributes and the event attributes in HTML.

th, td{ padding: 20px; }

Attribute	Value	Description
title		This attribute will specify the abbreviation of the definition term when hovering the mouse over the term.

Styling Methods for Tag:

You can use the following properties to style an HTML <dfn> Definition tag.

Properties to style the visual weight/emphasis/size of the text in tag:

CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
CSS font-size – This CSS property will help to set the size of the font.
CSS font-weight – This CSS property used to define whether the font should be bold or thick.
CSS text-transform – This CSS property will control the text case and capitalization.
CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.

Styles to coloring the text in Tag:

CSS color – This CSS property will specify the color of the text content and decorations.
CSS background-color – This CSS property helps to set the background color of an element.

Text layout styles for Tag:

CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
*CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
CSS white-space – This CSS property describes how white-space inside an element is handled.
CSS word-break – This CSS property decides where the lines should be broken.

Other Properties for Tag:

CSS text-shadow – This CSS property helps to add the shadow to text.
CSS text-align-last – This CSS property will set the alignment of the last line of the text.
CSS line-height – This CSS property defines the height of a line.
CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
CSS word-spacing – This CSS property specifies the spacing between every word.

Browser Support:

Browser Support

HTML
Definition Description Tag
HTML Center Tag
Basic HTML Definitions and Usages in the Real World
HTML Code Tag
HTML Aside Tag

The post HTML Definition Tag appeared first on Share Point Anchor.

HTML
Division tag

Share Point Anchor — Tue, 23 Feb 2021 20:42:39 +0000

The HTML tag is known as Division tag. This tag creates a division or section in an HTML document. It is used as an empty container , you can style it with CSS or manipulated it with JavaScript.

The tag is mostly used in web development because it helps to create a particular section for particular data or functions in the web pages. It is a block-level element. By default, browsers always place a line break before and after the tag.

Note : Don’t use the tag inside the tag. Because, the paragraph will be broken at the point, where the tag is entered.

Estimated reading time: 6 minutes

Syntax:

The division tag contains both starting tag and ending tag. The content is written between these two tags.

<div> Create your content here...</div>

HTML Tag Characteristics: th, td{ padding: 20px; }

| HTML
tag | Used to define a section of the document |
| Content categories | Flow content, palpable content. |
| Permitted content | Flow or WHATWG HTML. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts flow content or (in WHATWG HTML) |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTMLDivElement |
Sample of the HTML Tag:

Here is the sample of HTML division tag.

<!DOCTYPE html> <html> <head> <title>HTML <div> Tag</title> </head> <body> <h2> Example of HTML <div> Tag </h2> <div style="background-color:#dff0d8"> <p>Welcome to our website. Here is the example of HTML <div> tag.</p> <p>This is the sample paragraph.</p> </div> </body> </html>

Result:

Result

Flexbox:

Flex box is a one-dimensional layout method for laying out items in rows or columns. This is used to control the alignment, direction, order, and size of the items inside the container.

Sample of a Flex box with HTML tag:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .flex-container { display: flex; align-items: center; width: 100%; height: 200px; background-color: #43156D; } .flex-container > div { width: 35%; height: 60px; margin: 5px; border-radius: 3px; background-color: #D2B0F2; } </style> </head> <body> <div class="flex-container"> <div></div> <div></div> <div></div> </div> </body> </html>

Result:

Result

Use CSS Float Property with HTML Tag:

The CSS float property defines where the container should be placed on the web page. It allows the elements to appear next to, or apart from, one another, etc.

Sample of the HTML tag with CSS float property:

<!DOCTYPE html> <html> <head> <title>HTML <div> Tag</title> <style> .content { overflow: auto; border: 2px solid #666; } .content div { padding: 10px; } .content a { color: darkgreen; } .blue { float: right; width: 40%; background-color: #D2B0F2; } .green { float: left; width: 30%; background-color: #EDFA84; } </style> </head> <body> <h3>Example of HTML div tag</h3> <div class="content"> <div class="blue"> <p><b>This is the first paragraph</b></p> <a href="#">This is some hyperlink inside <div> tag.</a> <ul> <li>List item 1</li> <li>List item 2</li> </ul> </div> <div class="green"> <p>This is some paragraph inside div tag.</p> <ol> <li>List item 1</li> <li>List item 2</li> </ol> </div> </div> </body> </html>

Result:

Result

HTML Tag with Negative Margins:

The margin property defines the space around an HTML document. The Negative margins can be applied to both static or floated elements in an HTML document.

Example:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .content div { padding: 2%; } .content a { color: darkblue; } .main-content { width: 30%; margin-left: 32%; } .blue { width: 25%; margin-top: -5%; background-color: #D2B0F2; } </style> </head> <body> <div class="content"> <div class="main-content"> <h1><a href="#">This is some hyperlink inside div tag.</a></h1> </div> <div class="blue"> <h2>Heading 2</h2> <a href="#">This is some hyperlink inside div tag.</a> <ul> <li>List item 1</li> <li>List item 2</li> </ul> </div> </div> </body> </html>

Result:

Result

Relative+absolute positioning in Tag:

If you want to position
relative to a particular element you can use a combination of position: relative and position: absolute.
Example:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .content { position: relative; height: 200px; border: 1px solid #666; } .content div { position: absolute; width: 35%; padding: 20px; } .blue { right: 20px; bottom: 0; background-color: #7FFFD4; } .green { top: 10px; left: 15px; background-color: #87CEEB; } </style> </head> <body> <div class="content"> <div class="blue"> <p>This is some paragraph inside div tag.</p> </div> <div class="green"> <p>This is some paragraph inside div tag.</p> </div> </div> </body> </html>

Result:

Result

Attributes:

The Division tag supports the global attributes and the event attributes in HTML. th, td{ padding: 20px; }

Attribute Value Description

title This attribute will specify the abbreviation of the definition term when hovering the mouse over the term.

Styling Methods for Tag:

You can use the following properties to style an HTML Division tag.
Properties to style the visual weight/emphasis/size of the text in tag:

CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.

CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.

CSS font-size – This CSS property will help to set the size of the font.

CSS font-weight – This CSS property used to define whether the font should be bold or thick.

CSS text-transform – This CSS property will control the text case and capitalization.

CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.

Styles to coloring the text in Tag:

CSS color – This CSS property will specify the color of the text content and decorations.

CSS background-color – This CSS property helps to set the background color of an element.

Text layout styles for Tag:

CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.

*CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.

CSS white-space – This CSS property describes how white-space inside an element is handled.

CSS word-break – This CSS property decides where the lines should be broken.

Other Properties for Tag:

CSS text-shadow – This CSS property helps to add the shadow to text.

CSS text-align-last – This CSS property will set the alignment of the last line of the text.

CSS line-height – This CSS property defines the height of a line.

CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.

CSS word-spacing – This CSS property specifies the spacing between every word.

Browser Support:

Browser Support

Related Articles:

HTML
Definition Description Tag

HTML Center Tag

Basic HTML Definitions and Usages in the Real World

HTML Code Tag

HTML Aside Tag

The post HTML Division tag appeared first on Share Point Anchor.

HTML
Description Term Tag

Share Point Anchor — Tue, 23 Feb 2021 20:35:32 +0000

The

tag

stands for Description term or definition term in HTML. This tag is used to define the name of a term in a definition list. It must be placed inside the Description List
tag. The
tag is found within the tag.

Possible list to create
tag:

A single term followed by a single description.
A single term followed by multiple descriptions.
Multiple terms followed by a single description.
Multiple terms followed by multiple descriptions.

Estimated reading time: 4 minutes

Syntax:

The

tag always comes in pairs. It contains both an opening

tag

and closing tag. The content is written between these two tags.


<dl>
<dt>Description Term</dt>
<dd>Description Definition</dd>
</dl>

HTML
Tag Characteristics:

th, td{ padding: 20px; }

| HTML

element or a

element. |
| Permitted parents | It is a child element of

Sample of the HTML
Tag:


<!DOCTYPE html>
<html>
   <head>
      <title>Title of the Document</title>
   </head>
   <body>
      <h2>Example of HTML <dt> Tag</h2>
      <dl>
      <dt>HTML</dt>
      <dd>Hypertext Markup Language </dd>
      <dd>It is the language for authoring web documents.</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets</dd>
      <dd>It is the language for defining the styles and presentation of an HTML document.</dd>
      <dt> JavaScript</dt>
      <dd>A scripting language built-in to most browsers and designed to be used with web documents.</dd>
      </dl>
   </body>
</html>

Result:

Result

Download Sample File:

HTML-dt-Tag Download

Attributes:

The

tag supports both the global attributes and the event attributes.
Styling Methods for
Tag:

You can use the following CSS properties to style an HTML Description Term tag.

Properties to style the visual weight/emphasis/size of the text in
tag:

CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.

CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.

CSS font-size – This CSS property will help to set the size of the font.

CSS font-weight – This CSS property used to define whether the font should be bold or thick.

CSS text-transform – This CSS property will control the text case and capitalization.

CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.

Styles to coloring the text in
Tag:

CSS color – This CSS property will specify the color of the text content and decorations.

CSS background-color – This CSS property helps to set the background color of an element.

Text layout styles for
Tag:

CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.

*CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.

CSS white-space – This CSS property describes how white-space inside an element is handled.

CSS word-break – This CSS property decides where the lines should be broken.

Other Properties for
Tag:

CSS text-shadow – This CSS property helps to add the shadow to text.

CSS text-align-last – This CSS property will set the alignment of the last line of the text.

CSS line-height – This CSS property defines the height of a line.

CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.

CSS word-spacing – This CSS property specifies the spacing between every word.

Browser Support:

Browser Support

Related Articles:

HTML Center Tag

HTML Aside Tag

Basic HTML Definitions and Usages in the Real World

HTML Big Tag

HTML
Definition Description Tag

The post HTML

Description Term TagShare Point Anchor

DEV Community: Share Point Anchor

HTML Keygen Tag

Syntax:

HTML Tag Characteristics:

Sample of the HTML Tag:

Result:

Download Sample File:

Attributes:

Browser Support:

Related Articles:

HTML IsIndex Tag

Syntax:

Sample of the HTML Tag:

Result:

Example:

Result:

Attributes:

Browser Support:

Related Articles:

HTML Legend Tag

- heading

heading

Syntax:

HTML Tag Characteristics:

Sample of the HTML Tag:

Result:

Download Sample File:

Use CSS property to style an HTML Tag:

Sample of the HTML tag with CSS:

Result:

Attributes:

Styling Methods for Tag:

Properties to style the visual weight/emphasis/size of the text in tag:

Styles to coloring the text in Tag:

Text layout styles for Tag:

Other Properties for Tag:

Browser Support:

Related Articles:

HTML Image Tag

Syntax:

Sample of the HTML Tag:

Result:

Download Sample File:

Use CSS property to style the tag:

Sample of the tag with CSS property :

Result:

Src and Alt Attributes:

Sample of the HTML tag with the src and alt attributes:

Result:

HTML tag with “loading” Attribute:

Supported Images Formats:

Image Loading Errors:

Attributes:

Deprecated Attributes:

Browser Support:

Related Articles:

CSS background-origin property

Background-Origin property characteristics:

Syntax:

Values:

Example of the background-origin property:

Result:

Example of background-origin property with the “padding-box” and “content-box” values:

Result:

Example of a background-origin property with different values:

Result:

Browser-Support:

Frequently Asked Questions:

HTML Insert Tag

Syntax:

HTML Tag Characteristics:

Sample of the HTML Tag:

Result:

Download Sample File:

Use CSS property to style an HTML Tag:

Sample of HTML tag with CSS properties:

Result:

Attributes:

Browser Support:

Related Articles:

-
heading

HTML
Division tag