Introduction to <article>

The <article>HTML element represents independent parts of a document, an application or a site and is intended to be independently used.
Examples of independent items created by a publisher include: • A forum post, <magazine>or <newspaper><article>• User-submitted comments on a publication — for example,
blog posts and reader reviews. • Product card within an inventory listing page.

Copy to clipboard
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>title of <article> tag</title>
    </head>
    <body>

    <div class="container">
    <article>
        <header>
            <h2>Understanding the Basics of HTML</h2>
            <p>Published on August 26, 2024, by Jane Doe</p>
        </header>
        <p>HTML (Hypertext Markup Language) is the standard markup language for creating web pages. 
 It forms the structure of web pages and is used in conjunction with CSS and JavaScript to create responsive and dynamic web experiences...</p>
        <figure>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSftpyvOickntVa0T_ndxWe5rS5iPP6O7v5JQ&s" alt="HTML Basics">
            <figcaption>Illustration of HTML structure and elements.</figcaption>
        </figure>
        <footer>
            <a href="#">Read More</a>
            <a href="#">Share</a>
        </footer>
    </article>

    <article>
        <header>
            <h2>Breaking News: Tech Giant Launches New AI Tool</h2>
            <p>By John Smith | August 26, 2024</p>
        </header>
        <p>The tech giant announced a revolutionary new AI tool designed to automate various tasks and increase productivity. 
 The new tool integrates seamlessly with existing systems and provides advanced analytics and insights...</p>
        <ul>
            <li>Automated workflow management</li>
            <li>Advanced data analytics</li>
            <li>Seamless integration with existing systems</li>
        </ul>
        <footer>
            <a href="#">Read More</a>
            <a href="#">Comment</a>
        </footer>
    </article>

    <article>
        <header>
            <h2>Product Spotlight: Ultra HD 4K Monitor</h2>
        </header>
        <p>Experience stunning visuals with our latest Ultra HD 4K Monitor. 
 Perfect for gamers, designers, and professionals looking for superior color accuracy and a wide viewing angle...</p>
        <ul>
            <li>Resolution: 3840 x 2160</li>
            <li>Screen Size: 27 inches</li>
            <li>Refresh Rate: 144Hz</li>
            <li>Connectivity: HDMI, DisplayPort</li>
        </ul>
        <footer>
            <button class="btn">Buy Now</button>
            <a href="#">Learn More</a>
        </footer>
    </article>

    <article>
        <header>
            <h2>How to Create a Responsive Navigation Bar</h2>
            <p>By WebDev Guru | Updated August 26, 2024</p>
        </header>
        <p>A responsive navigation bar automatically adjusts to different screen sizes. 
 This tutorial will guide you through the process of creating a flexible and user-friendly navigation bar using CSS Flexbox and media queries...</p>
        <section>
            <h3>Step 1: Basic HTML Structure</h3>
            <p>Start by creating a basic HTML structure with a <nav> element...</p>
        </section>
        <section>
            <h3>Step 2: Adding CSS Styles</h3>
            <p>Use media queries to ensure the navigation bar looks good on both desktop and mobile devices...</p>
        </section>
        <footer>
            <a href="#">Download Source Code</a>
            <a href="#">Leave a Comment</a>
        </footer>
    </article>
</div>

</body>
</html>
Copy to clipboard
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

    body {
      font-family: 'Roboto', sans-serif;
      background-color: #1a1a1a;
      color: #e0e0e0;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    
    * {
      color-scheme: dark;
    }
    
    .container {
      background-image: linear-gradient(to right, rgb(39, 42, 51), rgb(39, 39, 46));
      max-width: 800px;
      width: 100%;
      padding: 20px;
      margin: 0 auto;
    }
    
    article {
      background: linear-gradient(145deg, #2c2c2c, #232323);
      border-radius: 15px;
      padding: 25px;
      margin: 30px 0;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 6px 6px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      overflow: hidden;
      position: relative;
    }
    
    article:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.4);
    }
    
    article::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 8px;
      background: linear-gradient(to right, #ff5f7e, #57c1eb); /* Pink to blue gradient */
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }
    
    article header {
      margin-bottom: 20px;
    }
    
    article header h2, article header h3 {
      font-size: 2em;
      margin: 0;
      color: #ffffff;
      font-weight: 700;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
    }
    
    article header p {
      color: #aaaaaa;
      font-size: 0.95em;
      margin-top: 8px;
    }
    
    article p {
      font-size: 1em;
      line-height: 1.8;
      color: #cccccc;
      margin-bottom: 20px;
    }
    
    article ul {
      padding-left: 20px;
      margin: 15px 0;
    }
    
    article ul li {
      margin-bottom: 10px;
      list-style-type: disc;
      color: #ffffff;
    }
    
    article figure {
      margin: 20px 0;
      text-align: center;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      transition: transform 0.3s ease;
    }
    
    article figure img {
      max-width: 100%;
      height: auto;
      transition: transform 0.3s ease;
    }
    
    article figure:hover img {
      transform: scale(1.08);
    }
    
    article figure figcaption {
      font-size: 0.85em;
      color: #888888;
      margin-top: 10px;
    }
    
    article footer {
      border-top: 1px solid #333333;
      margin-top: 20px;
      padding-top: 15px;
      font-size: 0.9em;
      color: #aaaaaa;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    article footer a {
      color: #57c1eb;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s ease;
    }
    
    article footer a:hover {
      color: #ff5f7e;
      text-decoration: underline;
    }
    
    article .btn {
      display: inline-block;
      padding: 10px 20px;
      background: linear-gradient(to right, #ff5f7e, #57c1eb); /* Pink to blue gradient */
      color: #ffffff;
      border: none;
      border-radius: 25px;
      font-size: 0.95em;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    
    article .btn:hover {
      background: linear-gradient(to right, #57c1eb, #ff5f7e); /* Blue to pink gradient on hover */
    }
    
    @media (max-width: 768px) {
      .container {
        padding: 15px;
      }
    
      article header h2, article header h3 {
        font-size: 1.6em;
      }
    
      article p, article footer {
        font-size: 0.9em;
      }
    
      article footer {
        flex-direction: column;
        align-items: flex-start;
      }
    
      article footer a {
        margin-bottom: 10px;
      }
    }

Global Attributes

AttributesDescription
accesskeySpecifies a shortcut key to activate or focus an element.
autocapitalizeControls whether and how text input is automatically capitalized.
classSpecifies one or more class names for the element, allowing CSS styling and JavaScript manipulation.
contenteditableSpecifies whether the content of an element is editable or not.
contextmenuSpecifies a context menu for the element.
dirDefines the text direction. Possible values are "ltr" (left-to-right), "rtl" (right-to-left), and "auto".
draggableSpecifies whether an element is draggable. Possible values are "true" or "false".
enterkeyhintSpecifies the action label or icon to be shown for the enter key on virtual keyboards.
hiddenIndicates that the element is not yet, or is no longer, relevant. The browser does not display elements that have the `hidden` attribute set.
idSpecifies a unique identifier for the element.
inputmodeProvides a hint to browsers for which virtual keyboard configuration to use when editing this element or its descendants.
isAllows you to specify the type of custom element.
langSpecifies the language of the element's content.
nonceA cryptographic nonce ("number used once") that can be used by Content Security Policy (CSP) to determine whether or not a given fetch will be allowed to proceed.
partSpecifies the element’s part in the shadow DOM.
slotAssigns a slot in a shadow DOM shadow tree.
spellcheckIndicates whether the element is subject to spell checking.
styleProvides inline CSS styling for the element.
tabindexSpecifies the tab order of the element.
titleAdds extra information about the element, displayed as a tooltip when hovering over the element.
translateSpecifies whether the content of the element should be translated. Possible values are "yes" or "no".
HTML AttributesGlobal AttributesEvent Attributes
To view the full list
To view the full list
To view the full list
elementsChrome BrowsersMicrosoft Edge BrowserFirefox BrowsersSafari BrowserOpera Browser
<article>YesYesYesYesYes