DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <dir> Directory Tag

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>
        
        
        Enter fullscreen mode Exit fullscreen mode

        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>
        
        
        Enter fullscreen mode Exit fullscreen mode

        Result:

        Result

        Download Sample File:

        HTML-dir-TagDownload

        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>
        
        
        Enter fullscreen mode Exit fullscreen mode

        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

        Related Articles:

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

      1. Top comments (0)