DEV Community

Mohammed Ali
Mohammed Ali

Posted on • Edited on

HTML5 [Live Doc]

HTML: Every tag has a predefined task.
HTML5 tags make the site SEO Friendly.

head [metadata about the page, invisible]

  • title: appears on tab, used as name while bookmarking the page
  • link: body [visible content on the page]
  • div: structure the page, occupies the complete line.
  • span: works similar to div, but doesn’t occupy the complete line. Ex. span allows us to selectively target a partial-section of an element. Two span tags can be placed next to each other.
  • h1 to h6
  • anchor : For going to some other page or to some section of the page i.e related to navigation Ex. has attributes: target=_blank, href
  • img : [has attributes: src]
  • br
  • input : [has attributes: type=text, placeholder]
  • button : Used only for some actions
  • Classes & ids: To write reusable styles
  • header: Contains introductory content, navigation links, menu, search bar, brand logo
  • footer: contact, links, legal info.
  • nav
  • main: main content of the page
  • article: more of a self-contained element. Ex. a blog post
  • section: generic part of any document. Multiple sections on a page, which are part of something bigger. It breaks down content into parts. Includes a heading, Not a "header".
  • aside: Add secondary or related content to a post on a page
  • Nesting: "section", "aside" both can be nested inside "article".

Semantic HTML5 Guidelines:

  • USE instead of
  • USE instead of

List of Deprecated HTML Tags:
acronym, big, centre, dir, font, frame, frameset, marquee, nobr, noembed, noframes, param, plaintext, rb, rtc, strike, tt, xmp

Top comments (0)