1 / 8

The <article> tag in HTML5

Learn about the <article> tag in HTML5 and its use as an independent and self-contained content element. Find out which browsers support it and how it relates to existing HTML elements.

owensb
Download Presentation

The &lt;article&gt; tag in HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The <article> tag in HTML5 CS 300-1 Client-Side Web Development By: Sana Khan

  2. What is <article> tag and what is the use for this element? • It specifies an independent, self-contained content. • It is a new semantic element in html5 and use to markup content that makes sense on its own and can be easily differentiate from the rest of the page content. It has opening and closing tags. • Do not use it around every single paragraph because it is a specific element. • It can include blog entry, news, comments, and forum posts.

  3. What browsers support its use?(include version) • According to the w3school, almost all the popular browser support this element, such as, Google Chrome, Microsoft Edge, FireFox, Safari and Opera. • According to the techonethenet, it supports these browsers: • Chrome 5+ • Android 2.2+ • Firefox 4.0+ (Gecko 2.0+) • Firefox Mobile 4.0+ (Gecko 2.0+) • Internet Explorer 9.0+ (IE 9.0+) • IE Phone 9.0+ • Opera 11.10+ • Opera Mobile 11.0+ • Safari 4.1+ (WebKit) • Safari Mobile 5.0+ (iOs 4.2+)

  4. Did the <article> tag replace any existing HTML element? • According to templemonster website, when HTML5 new tags were introduced, some developers thought they can fully replace div with these elements, but div is still using for some sections. • However, html5 elements have replaced some <div> tag without affecting the layout because all the new elements behave exactly similar to div tags. While, these new elements including <article> tag makes the content more clearer and easier to index correctly.

  5. Example of HTML5 Page content

  6. Picture of HTML5 Page Content Example

  7. Resources • “HTMLTag.” HTML Article Tag, www.w3schools.com/tags/tag_article.asp. • “HTML Tag.” W3docs, W3docs, 7 Nov. 2018, www.w3docs.com/learn-html/html-article-tag.html. • “The Article Tag.” The Article Tag - The Complete HTML5 Tutorial, html5-tutorial.net/new-section-tags/article-tag/. • Www.techonthenet.com. HTML: Tag, www.techonthenet.com/html/elements/article_tag.php. • Korcheg, Edward. “HTML5 Semantics: New Elements to Replace Div.” MonsterPost, 14 Aug. 2018, www.templatemonster.com/blog/html5-semantics-elements-replace-div-tag/. • Melillo, Eric, et al. “How to Use Semantic HTML5 to Structure Your Page Correctly.” SEMrush Blog, 25 Sept. 2017, www.semrush.com/blog/semantic-html5-guide/.

More Related