html article tag example

-

html article tag example

web designing theory

This Blog You Will Learn 

ஃ What is the HTML <article> tag?

ஃ Why Use the <article> Tag?

ஃ Syntax of HTML <article> tag 

ஃ Explain Program

ஃ Output

What is the HTML <article> tag?

✅HTML <article> tag is semantic HTML5 Element.
✅Represent  a distinct piece of content that be distributed  own.
✅define self contained  independent content webpage. 

Why Use the <article> Tag?

✔Semantic  Meaning clearly browsers & search engines this independent content unit.
✔Better Accessibility   Screen readers can navigate articles easily.
✔SEO use Search engines can better understand & index article content.

 Syntax of HTML <article> tag 

<article>
  <!-- content here -->
</article>

html article tag example 

Example 

<!DOCTYPE html>
<html>
    <body>
        <h1> Article element html</h1>
        <article>
            <h2> Web designing theory blogspost</h2>
             <p> webdesigningtheory.blogspot.com this website  education
platform
                student learn to the webdesigning subject HTML easy learn
 programming language       </p>
             </article>

             <article>
            <h2> Web designing theory blogspost</h2>
             <p> webdesigningtheory.blogspot.com this website  education
platform
                student learn to the webdesigning subject CSS easy learn
 programming language       </p>
             </article>
              <article>
            <h2> Web designing theory blogspost</h2>
             <p> webdesigningtheory.blogspot.com this website  education
platform
                student learn to the webdesigning subject PHP easy learn
 programming language       </p>
             </article>
    </body>

</html>

html article tag example

Explain Program

Step  1] 

<!DOCTYPE html>

This declare the document type.

browser that the document is written in html

Step 2 ]

<html>.... . </html>

html is the root element of the html page.

 Every thing inside it is part of the webpage.

Step 3]

<head>.....</head>

head section contain metadata  about the webpage information 

for the browser not display on the webpage.

Step 4]

  <h1> Article element html</h1>

  main heading of  the entire page.

Step 5]

  1. <article> element 
  2.  article element use content can stand on own blog post, news article, post
  3.  <article>  new independent content block post 
  4.  <h2>   -  sub-heading 
  5.  <p>    -  paragraph

Step 5]

closing the Tag


</body>

 </html>

html article tag example

Output

html article tag example

Related Post :-

how to set image height

html link tag explain

how to use pre tag

Comments

Post a Comment

Popular posts from this blog

What Is CSS Text Color in 2026

-
Image
 What Is CSS Text Color What Is CSS Text Color CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience . Syntax  selector{   color:value; } Purpose of Text Color ✅ Make content readable.  ✅ Highlight important information. ✅ Match brand identity. ✅ Create visual hierarchy. ✅ Improve user experience. Real world Use Cases Highlighting error messages. Emphasizing headings. Branding and theme design improving content readability. What Is CSS Text Color Example   <! DOCTYPE html > < html > < head > < style > body {   color : black ; } h1 {   color : purple ; } h2 {   color : orange ; } </ style > </ head > < body > < h1 > CSS Text Color </ h1 > < h2 > What Is CSS Text Color? </ h2 > < p > CSS text color is...
Read more

CSS Outline Color Property in 2026

-
Image
CSS Outline Color Property with Examples This Blog You Will Learn  ஃ  What is CSS Outline Color property? ஃ  Syntax  ஃ  Why outline-color is important ? ஃ  CSS Outline Color Property  Examples ஃ  CSS Outline Color Property  Output What is CSS Outline Color property? CSS Outline-color property use to set color of outline  is drawn outside the border of HTML Element. Syntax  outline-color: color | invert; Why outline-color is important ? ✔  Improves  visibility of elements. ✔  Used for focus states (button,forms) ✔  Helps accessibility. ✔  Highlights elements without breaking layout. CSS Outline Color Property   Examples <! DOCTYPE html > < html > < head > < style > p {   border : 1px solid black ;   padding : 5px ; } p.ex1 {   outline-style : solid ;   outline-color : red ; } p.ex2 {   outline-style : dotted ;   outline-color : blue ; ...
Read more

how to add background image in html.

-
Image
how to insert background image in html Program    Background Image  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < style >     p { background-image : url ( 'https://cdn.wallpapersafari.com/27/83/hGWHei .jpg' ); <!-- image path --> height : 600px ; <!--height of image-->         width : 50% ;     }     p {         color : red ;         text-align : center ;     } </ style > < body >     < h1 > Background Image </ h1 >     < BR<BR >< BR > < p > < BR<BR >< BR >< BR >< BR > how to insert background image ...
Read more