HTML

HTML

HyperText Markup Language is the standard language for creating web pages; it's a markup language used to define the structure of content.

HTML 5

The latest and most widely used version of HTML, which introduced new semantic elements (like

) and multimedia support (

Declaration that defines this document to be an HTML5 document. This is not an HTML tag.

The root element of the page. All other elements are nested inside this.

A container for metadata (data about the HTML document), such as the page title, character set, and styles. This content is not displayed on the page.

Contains all the visible contents of the web page, such as text, images, and links.

HTML Element

Defined by a start tag, some content, and an end tag.

Start Tag

Also called the opening tag (e.g.,

).

End Tag

Also called the closing tag, which has a forward slash (/) before the tag name (e.g.,

).

Empty / Self-Closing Elements

Elements that do not have content and do not require a closing tag (e.g.,
, ).

Attribute

Provides additional information about an HTML element. Attributes are always specified in the start tag as name="value" pairs.

Location

Attributes are always specified in the start tag.

Format

They are written as name="value" pairs.

Common Attributes

href, src, width, height, alt, class, id, style.

to

Define headings of different levels.

is the most important, and they should be used in hierarchical order to describe document structure.

Defines a paragraph of text. Browsers automatically add space (margin) before and after it.

Inserts a single line break.

style

A global attribute used to specify CSS styles for an element in the format: property: value.

Defines bold text (visual importance).

Defines important text (semantic importance).

Defines italic text (visual difference).

Defines emphasized text (semantic emphasis).

Defines marked or highlighted text.

Defines subscript text

Defines superscript text.

Color Names

Use a predefined name (e.g., red, blue, tomato).

HEX Codes

A 6-digit hexadecimal number prefixed with # (e.g., #FF0000 for red).

RGB Values

A way to specify colors by defining the intensity of Red, Green, and Blue (e.g., rgb(255, 0, 0)).

Inline CSS

Applies CSS to a single element using the style attribute.

Internal CSS

Defines CSS rules within the

External CSS

Links the HTML document to an external .css file using the element. This is the preferred method.

(Anchor Element)

Defines a hyperlink.

href

Hypertext Reference: An attribute that specifies the URL (destination) the link goes to.

target="_blank"

An attribute that instructs the browser to open the linked document in a new window or tab.

Internal Link

Link to another page within the same website (using a relative path).

Link to an ID

Link to a specific element on the same page using its id.

The empty element used to embed images.

src

Source: An attribute that specifies the path (URL) to the image file.

alt

Alternative text: A required attribute that provides a description of the image for accessibility and SEO.

Defines the entire table. Used for displaying tabular data, not page layout.

Table Row: Defines a row in the table.

Table Header: Defines a header cell (usually bold and centered).

Table Data: Defines a standard data cell.

Unordered List: Items are marked with bullets.

Ordered List: Items are marked with numbers or letters.

List Item: Defines an item within both

or
.

A container for all input elements. It defines where the data should be sent (action attribute) and how (method attribute).

The most used form element; its type attribute defines the input type (e.g., text, password, submit).

Defines a label for an element, which is essential for accessibility.

Defines a clickable button, often used to submit a form.

Division: A generic, block-level container with no semantic meaning. It is used to group elements for styling or scripting.

class

A global attribute used to specify one or more class names. Classes are reusable and commonly used to apply CSS styles.

id

A global attribute used to specify a unique identifier for an element. It must be unique within the entire page.

Defines the title shown on the browser tab. Essential for SEO.

Used to define metadata like the character set (charset), viewport settings, and description for search engines.

Used to link to external resources, most commonly CSS files.

Used to define client-side JavaScript code or link to an external script file.

defines the introductory content, often containing the logo, site title, and navigation.

set of navigation links.

contains the dominant content of the document. Only one

tag is allowed per page.

<section>

for a thematic grouping of content, which usually includes a heading.

for independent, self-contained content, like a blog post or news story.

for content tangentially related to the content around it (e.g., a sidebar).

contains authorship, copyright, or contact information.

RWD

Responsive Web Design: The practice of making web pages look good on all devices (desktops, tablets, and phones).

Viewport

The user's visible area of a web page.

Viewport Meta Tag

This is the crucial first step for RWD. It sets the width of the viewport to the device's width and sets the initial zoom level.

width=device-width

A crucial viewport meta tag setting that sets the page width to follow the screen width of the device.

initial-scale=1.0

Sets the initial zoom level when the page is first loaded by the browser.

Semantics

Using HTML tags that clearly describe the meaning of the content they contain (e.g., using

instead of

).

Semantic Tags

Tags like

,

,

,

,

,

,

. They convey meaning about the content.

Non-Semantic Tags

and that are containers with no inherent meaning.