The Role of Web Browsers

Browsers act as the runtime environment for web applications. Their primary responsibility is to parse and render code (HTML, CSS, and JavaScript) into a visual interface that users can interact with. The core of any browser is its rendering engine. Because different browsers—such as Chrome, Firefox, Safari, Edge, and Opera—may use different engines, the speed and visual consistency of a webpage can vary acrosss platforms.

Web Standards: The Three Layers

Modern web development is built upon three distinct layers that separate content from presentation and logic:

• Structure (HTML): Defines the elements and content of the page.
• Presentation (CSS): Controls the visual design, including layout, colors, and fonts.
• Behavior (JavaScript): Manages interactivity and dynamic data processing.

HTML Syntax and Document Structure

HTML (HyperText Markup Language) uses a system of "tags" to describe the structure of a document. Tags are typically enclosed in angle brackets. Most elements consist of a start tag and an end tag (paired tags), while some are self-closing (single tags).

Elements within a document establish relationships:

• Parenet-Child: When one element is nested inside another.
• Siblings: Elements that share the same parent and exist at the same level.

Hierarchy with Headings

Heading tags range from <h1> to <h6>, representing levels of importance. They are block-level elements, meaning they occupy the full width of their container and appear in bold by default.

<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section Topic</h3>

Text and Layout Elements

For standard text blocks, the <p> (paragraph) tag is used. To handle spacing, developers use <br> for a line break and <hr> to insert a horizontal thematic break.

Text Formatting

While CSS is preferred for styling, HTML provides semantic tags for text emphasis:

Effect	Semantic Tag	Visual Tag
Bold	<strong>	<b>
Italic	<em>	<i>
Underline	<ins>	<u>
Strikethrough	<del>	<s>

Multimedia Integration

Images

The <img> tag is a self-closing element used to embed visuals. It relies on attributes to define its behavior:

<img src="assets/logo.png" alt="Company Logo" title="Click to go home" width="200">

• src: The path to the image file.
• alt: Alternative text displayed if the image fails to load.
• title: Tooltip text shown on hover.
• width/height: Dimensions in pixels. If only one is set, the image scales proportionally.

Audio and Video

HTML5 introduced native support for media files without requiring external plugins.

<!-- Audio Example -->
<audio src="media/podcast.mp3" controls></audio>

<!-- Video Example -->
<video src="media/demo.mp4" controls width="640" muted autoplay loop></video>

Attribute	Description
controls	Displays play, pause, and volume UI.
autoplay	Starts playback automatically (often requires "muted" for video).
loop	Restarts the media once finished.

Navigation and Links

Hyperlinks are created using the <a> (anchor) tag. The href attribute specifies the destination URL or file path.

<a href="https://example.com" target="_blank">Visit External Site</a>

The target attribute determines where the link opens:

• _self (default): Opens in the current tab.
• _blank: Opens in a new browser tab or window.

Understanding Resource Paths

When linking to images, scripts, or other pages, developers use two types of paths:

• Absolute Path: The full URL or exact file system location (e.g., https://site.com/image.png).
• Relative Path: The location relative to the current file.
  • filename.html: Same directory.
  • images/photo.jpg: Down into a subfolder.
  • ../index.html: Up one directory level.