Core HTML Tags

Document Title

The <title> element specifies the document's title displayed in the browser tab.

<title>Welcome Page</title>

Headings

Six heading levels are available, ranging from <h1> (largest) to <h6> (smallest).

<h1>Primary Heading</h1>
<h2>Secondary Heading</h2>
<h3>Tertiary Heading</h3>

Paragraphs

The <p> element defines a block of text as a paragraph.

<p>This is the first paragraph content.</p>
<p>This is the second paragraph content.</p>

Line Breaks

The <br> element creates a single line break within text.

First line<br>Second line on new row

Character Entities

Certain characters require entity notation to render correctly in HTML.

CSS-Based Layout

Structural Division

The <div> element groups content into distinct sections, styled via inline styles.

<div style="background-color: #5f9ea0; height: 80px;">Header</div>
<div style="background-color: #7fffd4; height: 350px;">Main Content</div>
<div style="background-color: #4169e1; height: 80px;">Footer</div>

Media and Links

Images

The <img> tag embeds an image with width, height, title, and alternate text attributes.

<img src='banner.jpg' width="300" height="200" title="Site Banner" alt="Banner not found">

Hyperlinks

The <a> tag creates clickable links. The target attribute controls link behavior.

<a href="https://www.example.com" target="_blank">Open in New Tab</a>

Target values:

• _self: Opens in current tab (default)
• _blank: Opens in new tab

Form Elements

Forms collect user input and specify sbumission parameters through action, method, and enctype.

<form action="process.php" method="post">
    Username: <input type="text" name="username"><br>
    Password: <input type="password" name="password"><br>
    Phone: <input type="text" name="phone"><br>
    Gender:
    <input type="radio" name="gender" value="m">Male
    <input type="radio" name="gender" value="f">Female<br>
    Interests:
    <input type="checkbox" name="interests" value="reading">Reading
    <input type="checkbox" name="interests" value="gaming">Gaming
    <input type="checkbox" name="interests" value="music">Music<br>
    Location:
    <select name="location">
        <option value="nyc">New York</option>
        <option value="la">Los Angeles</option>
        <option value="chi">Chicago</option>
        <option value="sea">Seattle</option>
    </select><br>
    <input type="submit" value="Submit">
</form>

Method types:

• get: Appends data to URL (visible, limited size)
• post: Sends data in request body (hidden, larger capacity)

Enctype values:

• application/x-www-form-urlencoded: Default encoding
• multipart/form-data: Required for file uploads

Embededd Frames

The <iframe> element embeds an external webpage within the current docuemnt.

<iframe src="https://www.example.com" frameborder="0" width="100%" height="400px"></iframe>

Common attributes:

• src: URL of the page to embed
• frameborder: Border width (0 for none)
• width/height: Frame dimensions