HTML5

Understand the structure of web pages with semantic HTML5
elements and best practices.

!DOCTYPE Tag

Definition: Declares the HTML version being used. For HTML5, it’s

Purpose: Ensures browser rendering in standards mode.

html tag

Definition: Root element of the HTML document.

Purpose: Encloses all content except .

Attributes: lang="en" specifies the language.

Head tag

Definition: Container for meta-information like title, styles, scripts.

Definition: Container for meta-information like title, styles, scripts.

Body tag

Definition: Contains the visible part of the HTML document (what users see).

Text Formatting and Content Tags

H1 to H6 tags

Definition: Six levels of topic-titles.

SEO Importance: h1 is crucial for page titles.

Paragraph Tag

Definition: Defines a paragraph of text.

Auto margin below text.

break tag

Definition: Line break (used in poetry, addresses).

Empty tag.

hr tag

Definition: Horizontal rule or thematic break.

Use: Visually separate sections.

Strong tag vs b tag

Strong : Indicates importance.

b : Only makes text bold with no semantic importance.

em tag vs i tag

Emphasizes text (read with vocal stress).

i: Italicized for style (e.g., citations, foreign words).

span tag

Definition: Inline container for applying styles. Does not affect layout.

Div tag

Definition: Block-level container for layout or styling.

Multimedia and Media Embedding

Image tag

Definition: Embeds an image. Attributes: src, alt, width, height

Alt text is crucial for accessibility.

Video and Audio tags

Definition: Embeds audio or video.

Needs controls attribute to show play buttons

Attributes : controls, autoplay

Form Tags and Inputs

Form tag

Definition: Collects user input.

Attributes: action, method

Input Tag

Definition: Various types of user input (text, checkbox, radio, etc.)

Type attribute decides behavior.

Textarea tag

Definition: Multi-line input box

button tag

Definition: Clickable button.

Types: submit, reset, button

Label tag

Definition: Defines label for input. Use for attribute.

Improves accessibility.

HTML 5 Layout tags

header,   footer,    main,    article,    section,    aside    and Nav tags

These provide semantic meaning to different page sections.

Help screen readers and SEO engines.

Tags from HTML 4.01 Currently not Using

font tag: we are Using CSS (font-family, color) in the place of Font tag in current Version

center tag: we are Using CSS text-align: center in the place of Center tag

big , small tag: (HTML4 style) : we are Using CSS font-size in the place of big and small Properties

strike, u, s tag: we are Using CSS text-decoration or semantic tags like del tag

Refrence Links

MDN Web Docs: MDN Reference

W3Schools HTML Tags: W3 School Refrence

HTML Living Standard (WHATWG): whatwg Reference