Back to Subject
Practice MCQ

Unit 1 - Notes

CSE326

Unit 1: Fundamentals of HTML

1. Introduction to Web Technologies and HTML

Web Technologies Overview

The World Wide Web operates on a Client-Server model.

  • The Client (Browser): Software (like Chrome, Firefox, Edge) that requests information. It is responsible for rendering HTML, CSS, and JavaScript into a visual interface for the user.
  • The Server: A powerful computer that stores website files and serves them to the client upon request.
  • HTTP/HTTPS: The protocol (HyperText Transfer Protocol) used for communication between the client and server.

HTML (HyperText Markup Language)

HTML is the standard markup language for documents designed to be displayed in a web browser. It provides the structure and content of a webpage.

  • HyperText: Refers to "text within text." It allows users to link to other pages via hyperlinks.
  • Markup Language: Instead of a programming language (which uses logic and loops), HTML uses tags to annotate text, defining how it should be displayed (e.g., "This is a heading," "This is a paragraph").
  • HTML5: The current version of HTML. It introduced semantic elements (<header>, <article>), multimedia support (<video>, <audio>), and improved APIs.

2. Structure of an HTML Document

Every HTML5 document follows a specific tree structure (DOM - Document Object Model).

The Boilerplate Code

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <!-- Visible content goes here -->
    <h1>Hello World</h1>
</body>
</html>

Breakdown of Structure

  1. <!DOCTYPE html>: This is a declaration, not a tag. It tells the browser that the document type is HTML5.
  2. <html>: The root element. All other elements are contained within this tag.
  3. <head>: Contains metadata (information about the document) that is not displayed on the page itself.
  4. <body>: Contains the actual content visible to the user (text, images, links, etc.).

3. Root and Metadata Elements

The Root Element

  • <html>: The container for all HTML elements (except the DOCTYPE).
    • Attribute: lang="en" helps search engines and screen readers determine the language of the page.

Metadata Elements (Inside <head>)

Metadata provides data about the HTML document.

  1. <title>: Sets the title shown in the browser's title bar or tab. It is crucial for SEO (Search Engine Optimization).
  2. <meta>:
    • charset="UTF-8": Specifies the character encoding (supports almost all characters and symbols).
    • viewport: Essential for Responsive Web Design. It sets the width of the page to follow the screen-width of the device (mobile-friendly).
    • description: Provides a summary of the page for search engines.
  3. <link>: Used to link external resources, most commonly external CSS files (<link rel="stylesheet" href="style.css">).
  4. <style>: Used to define internal CSS.
  5. <script>: Used to embed or reference JavaScript.

4. Basic Tags: Headings, Paragraphs, Breaks, Rules

Headings (<h1> to <h6>)

Headings are block-level elements used to define the structure and hierarchy of content.

  • <h1>: Most important heading (Main Title). Should be used only once per page for SEO.
  • <h6>: Least important heading.
  • Headings have default bold styling and varying font sizes.

HTML
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>

Paragraphs (<p>)

The <p> tag defines a block of text.

  • Browsers automatically add margins (white space) before and after a paragraph.
  • HTML ignores extra spaces and newlines within the code; it collapses them into a single space unless <pre> is used.

HTML
<p>This is a paragraph of text. It will start on a new line.</p>

Line Breaks (<br>)

The <br> tag produces a line break in the text (carriage return).

  • It is an empty tag (no closing tag).
  • Use case: Writing addresses or poems. Do not use it to create spacing between paragraphs (use CSS margins instead).

HTML
<p>John Doe<br>123 Main St<br>New York, NY</p>

Horizontal Rules (<hr>)

The <hr> tag defines a thematic break in the content.

  • Visually renders as a horizontal line.
  • It is an empty tag.
  • Use case: Separating topics within a section.

5. Text Formatting in HTML

HTML provides specific tags to format text. Modern HTML emphasizes Semantic Formatting (defining the meaning of the text) over Physical Formatting (defining the look).

Semantic Formatting Tags

1. <strong> (Strong Importance)

  • Function: Indicates that the text is of strong importance, seriousness, or urgency.
  • Visual: Rendered as bold by default.
  • Difference from <b>: <b> makes text bold for stylistic reasons; <strong> adds semantic weight for screen readers (accessibility).

2. <em> (Emphasized)

  • Function: Indicates stress emphasis. Changing the stress of a word changes the nuance of the sentence.
  • Visual: Rendered as italic by default.
  • Difference from <i>: <i> is for text in an alternate voice/mood (like technical terms); <em> is for vocal emphasis.

3. <mark> (Highlighted)

  • Function: Represents text that is marked or highlighted for reference or notation purposes.
  • Visual: Usually rendered with a yellow background.

4. <small> (Side Comment)

  • Function: Represents side comments like copyright, legal disclaimers, or fine print.
  • Visual: Rendered in a smaller font size.

5. <abbr> (Abbreviation)

  • Function: Defines an abbreviation or an acronym (e.g., HTML, CSS).
  • Attribute: Use the title attribute to provide the full description. When hovering, the browser shows the title.

HTML
<p>I am learning <abbr title="HyperText Markup Language">HTML</abbr>.</p>

6. <cite> (Citation)

  • Function: Defines the title of a creative work (e.g., a book, a poem, a song, a movie, a painting).
  • Visual: Rendered in italic.

HTML
<p><cite>The Scream</cite> by Edvard Munch.</p>

7. <dfn> (Definition)

  • Function: Represents the "defining instance" of a term. It indicates that the term contained within is being defined in the surrounding text.

HTML
<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

6. Quotations and Comments

Quotations

  1. <blockquote> (Block Quotation):

    • Used for long quotations (usually a paragraph or more) taken from another source.
    • Browsers usually indent <blockquote> elements.
    • Attribute: cite attribute can provide a URL to the source.
      HTML
          <blockquote cite="http://example.com/source">
        The internet is becoming the town square for the global village of tomorrow.
    </blockquote>

  2. <q> (Inline Quotation):

    • Used for short quotations that flow with the text.
    • Browsers automatically insert quotation marks around the content.
      HTML
          <p>Bill Gates said, <q>Content is king.</q></p>

Comments

Comments are lines of code ignored by the browser. They are not visible on the webpage but are viewable in the source code.

  • Syntax: <!-- Comment goes here -->
  • Purpose:
    1. Explain complex code logic.
    2. "Comment out" sections of code during debugging so they don't run/display.

7. Types of HTML Tags: Paired and Unpaired

Paired Tags (Container Tags)

These tags consist of an opening tag and a closing tag. They enclose content.

  • Syntax: <tagname>Content</tagname>
  • Examples:
    • <html> ... </html>
    • <p> ... </p>
    • <h1> ... </h1>
    • <strong> ... </strong>
  • Note: Failing to close these tags can break the layout or hierarchy of the page.

Unpaired Tags (Void/Empty/Singular Tags)

These tags do not have a closing tag because they cannot contain text or other elements.

  • Syntax: <tagname> or <tagname /> (XHTML style).
  • Examples:
    • <br> (Line Break)
    • <hr> (Horizontal Rule)
    • <img> (Image)
    • <input> (Input field)
    • <meta> (Metadata)

8. Block-level vs Inline Elements

Understanding the display behavior of elements is critical for layout design.

Block-level Elements

Block-level elements always start on a new line and take up the full width available (stretches to the left and right as far as it can).

  • Behavior:
    1. Starts on a new line.
    2. Has a top and bottom margin.
    3. Takes up 100% width of its parent container.
  • Examples:
    • <div> (Standard block container)
    • <h1> - <h6>
    • <p>
    • <ul>, <ol>, <li>
    • <header>, <footer>, <section>

Inline Elements

Inline elements do not start on a new line. They only take up as much width as necessary.

  • Behavior:
    1. Does not start on a new line.
    2. Allows other elements to sit next to it horizontally.
    3. Top and bottom margins/padding are often not respected by the document flow.
  • Examples:
    • <span> (Standard inline container)
    • <a> (Anchor/Link)
    • <img>
    • <strong>, <em>, <mark>
    • <br>

Comparison Table

Feature Block-level Elements Inline Elements
Line Break Starts on a new line Continues on the same line
Width Full width (100%) Only strictly necessary width
Can contain Other block-level or inline elements Only data and other inline elements
Example <div>, <p>, <h1> <span>, <a>, <b>

Code Illustration

HTML
<!-- Block Level: Each div is on a new line -->
<div style="background-color: lightblue">Block 1</div>
<div style="background-color: lightcoral">Block 2</div>

<!-- Inline: Both spans are on the same line -->
<span style="background-color: yellow">Inline 1</span>
<span style="background-color: lightgreen">Inline 2</span>