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

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs