Step 2: Understanding HTML Structure

1. Tags

Two Types of Tags

Structure Tags

Structure tags function as boxes, they developed from <div> tags.

Note: 99.9% of all tags work in pairs — a beginning and an end tag. Example: <h1>Title</h1>

Common structure tags include:

<header> </header>
<nav> </nav>
<main> </main>
<article> </article>
<section> </section>
<footer> </footer>
<aside> </aside>

Note: Any name can be used for a class or ID <div> (division) tag.

Text Tags

Text tags give hierarchy to the text. They were part of the original concept for HTML.

<h1> </h1> (largest title)
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> (smallest title)

Note: "h" stands for headline.

Other text tags include:

<b> </b> (bold)
<strong> </strong> (another form of bold)
<i> </i> (italic)
<em> </em> (for emphasis, another form of italic)
<p> </p> (for paragraph, used for all body copy)
<code> </code> (to display code on a page)
<span> </span> (to give a section or span of text a slightly different style)
<br> (a forced line break)

2. Links (Anchors)/Linking Pages

HTML Links were invented by Tim Berners-Lee in 1989 to share text information. He originally called them "anchors".

Creating a Hyperlink

To create a link in Dreamweaver:

In Dreamweaver, open the page where you want to create a link.
Select the text or image you want to serve as the link.
Click the "Insert" menu, then choose "Hyperlink".
Browse for the HTML page or file you want to link to.
Set the "Target" field to define if your page opens in the same or a new window.
Click "OK" to create the link.

3. Media Queries

Purpose

Media Queries enable websites to adjust to various screen sizes, improving usability across devices.

The Code

Media queries are added within CSS:

@media only screen and (max-width: 990px) {
    .image-selector {
        display: none;
    }
}

Note: Be sure to close curly braces properly to avoid errors.

Best Practices

Modify only what's necessary for different screen sizes.
Implement a foundational CSS and override with media queries when needed.