01 Writing HTML

Posted on by

Writing HTML5

HTML stands for HyperText Markup Language. Content is “marked up” using tags to designate its structural significance. Each piece of marked-up content becomes an HTML element.

A first level header looks like this:

<h1>Writing HTML5</h1>

All parts of the document are marked up with tags to create elements—even parts you cannot see, like the meta tags in the header, or the <style> and <script> tags that contain CSS and Javascript.

To create an HTML page, open a text editor. Create a new file and save it as index.html with a lowercase “i”. This file is the index of the directory where it lives—the file that opens when someone enters that directory.

Every directory should have an index.html file. Some web servers display the directory contents when no index file exists. Other files in the directory can be reached by placing links on the index page.

If you want to see the entire HTML specification in one document, visit the living standard.

The Structure of an HTML Document

The DOCTYPE

The DOCTYPE tells the browser which version of HTML rules to follow. In HTML5, it’s simple:

<!DOCTYPE html>

This is the only DOCTYPE I expect to see in your work.

The HTML Element

The HTML element contains all other elements. It is the root element. The language attribute specifies English:

<html lang="en">

The HEAD Element

The head element contains information about the content but not the content itself. This is the document’s metadata. Nothing in the head element displays in the browser window.

The character encoding declaration specifies how the document is stored. The meta tag charset="utf-8" tells the browser to use Unicode. The title shows up in the browser tab.

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

The head element closes before the body element opens.

The BODY Element

Everything in the body element shows up in the browser window. Think of it as containing everything visible on the page.

<body>
<!-- Comment your work! -->
<p>Hello World!</p>
</body>

Only “Hello World!” displays. Comments are not rendered by the browser.

The Closing HTML Element

Closing the HTML element is the last tag on the page:

</html>

Element or Tag?

An element is a complete chunk of code: a start tag, content, and an end tag. Elements are objects the browser can work with.

<div>This is a div element</div>

Tags are just the opening and closing code. <div> is a tag. <div>content</div> is an element.

People use these terms interchangeably. For this course, that’s fine. Just know the distinction exists.

The Inherent Structure of HTML

HTML describes the structure of content, not how it should look. That’s CSS’s job.

Content flows in two directions:

Inline—horizontal, like characters in a line of text. In English, left to right.

Block—vertical, like paragraphs stacking downward. Block elements expand to fill their parent’s width by default.

Important rule: block elements cannot be children of inline elements. Inline elements are the content inside block elements.

CSS can change how elements display—making inline elements act like blocks, or vice versa. But valid HTML still requires that block elements don’t descend from inline elements in the markup itself.

Tag Attributes and Values

Attributes

HTML tags can take attributes that describe aspects of the element. Each attribute needs a space between it and the next. Attributes for the <img> tag include src, width, height, class, and alt.

<img src="photo.jpg" alt="description of photo">
<a href="page.html">Link Text</a>

Values

Every attribute has a value. The value of src is the location and name of the image. Always use quotes around values—it’s best practice even when not strictly required.

Role Attributes

The role attribute describes what an element does in the context of the document. It helps screen readers and other assistive technologies understand your page:

<nav role="navigation">

Understanding the Tag Hierarchy

HTML is a collection of elements arranged in a containment hierarchy—a parent-child relationship. The enclosing tag is the parent; the enclosed tag is its child.

Think of it as a tree. The <html> tag is the trunk. It splits into two main branches: <head> and <body>. Inside the body are all the other branches that make up the document.

The <head> contains information about the page that isn’t visible: <title>, <meta> tags, <style>, <script>, and <link> tags.

The <body> contains everything visible in the browser window. Tags nest several levels deep. This grouping makes it easy to create different parts of a layout.

Because each element is a child of another element, there are clear paths through the document. An image might be a child of a paragraph, which is a child of an article, which is a child of a section, which is a child of main. The path: html body main section article p img.

This path matters for CSS. It’s how you target specific elements for styling.

How to Write the Code

Use tabs to show how many levels the code is nested from the <html> element. This creates a visual way to check if your nesting is correct:

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <main>
            <section>
                <header>
                    <h1>Headline</h1>
                </header>
                <article>
                    <p>Content goes here.</p>
                </article>
                <footer>
                </footer>
            </section>
        </main>
    </body>
</html>

There are tools that clean up your indentation automatically. Use them before submitting your midterm and final.

The DOM

The browser parses your HTML file, analyzing the syntax of each tag to see how it fits together according to HTML rules. The result is a Document Object Model (DOM)—a tree where each node represents an element.

When you use the browser’s developer tools to inspect a page, you’re looking at the DOM.

General Rules to Follow

HTML5 loosened some rules, but follow these for well-formed documents:

Close Every Tag

Most tags contain content, with an opening tag and a closing tag marking where the content starts and ends. Some tags don’t need closing because they have no content—they point to content and get replaced by it.

Self-closing tags: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr.

Forgetting to close a tag causes havoc. The validator will catch it. This is the most common mistake in the first weeks of coding.

Correctly Nest Every Tag

If a tag opens before a preceding one closes, it must close before that preceding one closes.

Correct: <header><h1>Title</h1></header>

Wrong: <header><h1>Title</header></h1>

CSS relies on proper nesting to target styles. Get this right. Browsers sometimes repair nesting mistakes, but don’t count on it.

Inline Tags Cannot Contain Block Level Tags

The validator will catch you if you do this. It seems obvious, but it happens.

Keep Tags Lowercase

This is a requirement for XHTML5. We won’t worry about XHTML5, but lowercase is good practice anyway.

Inline Elements

These elements flow like characters, one after another horizontally until the line ends.

SPAN

Selects inline content for styling:

So much <span style="color: red;">information</span>.

STRONG

Increases importance (displays bold by default):

So much <strong>information</strong>.

EM

Emphasis (displays italic by default):

So much <em>information</em>.

BR

Line break without creating a new paragraph:

So much<br>information.

Q

Inline quotations. Browsers can add quotation marks automatically:

So much <q>information</q>.

Comments

Add notes or hide code. Comments don’t display in the browser:

<!-- Comment your work! -->

Use comments to notate your document. They’ll remind you why you did something a certain way. You can also use them to temporarily hide code you don’t want to delete yet.

Don’t use two dashes in a row inside a comment—it confuses some browsers.

The Anchor Tag

The anchor element (<a>) creates hyperlinks using the href (hypertext reference) attribute.

Link to a Location on the Same Page

Any tag can be a target if it has an id:

<h3 id="section-name">Section Title</h3>

Link to it using the hash symbol:

<a href="#section-name">Jump to Section</a>

Link to Other Pages

Absolute address—the complete URL:

<a href="http://b.parsons.edu/~dejongo/01-writing-html5/">Writing HTML5</a>

Relative address—the path from the current file’s location:

<a href="01-absolute-and-relative-addresses/">Addresses</a>

Link to a Location on Another Page

Add the anchor to the end of the address:

<a href="03-applying-css/#color">Color Section</a>

Image Tag

The image tag gets replaced by the image. It has no closing tag:

<img src="images/photo.jpg" alt="Description for screen readers" title="Tooltip on hover">

The alt attribute is required. It provides text when the image doesn’t load, and screen readers use it to describe images to blind users. The validator will flag images without alt attributes.

For illustrators, designers, and photographers: load up your image descriptions. Search engines index them.

Block-level Elements

Block elements flow like paragraphs, one after another vertically down the page.

DIV

Division. The generic block element with no semantic meaning. Use it for styling or scripting when no other element fits:

<div style="background: pink; padding: 10px;">content</div>

Don’t use <div> when a semantic element would work. It’s not equivalent to <section>.

Headlines

Six levels, from most important to least. Use headlines to structure content, not based on how they look:

<h1>Main Headline</h1>
<h2>Section Headline</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>

Paragraph

<p>Paragraph content goes here.</p>
<p>Another paragraph.</p>

Blockquote

For quotes that take up an entire paragraph:

<blockquote>A substantial quote from another source.</blockquote>

Horizontal Rule

Represents a thematic break between paragraphs:

<hr>

Ordered List

Numbered sequentially:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

To continue numbering from a previous list, use the start attribute:

<ol start="4">
    <li>Fourth item</li>
</ol>

Unordered List

For items where order doesn’t matter. Always used for navigation:

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Definition List

For terms and their definitions:

<dl>
    <dt>Term</dt>
    <dd>Definition of the term.</dd>
    <dt>Another term</dt>
    <dd>Its definition.</dd>
</dl>

A term can have multiple definitions. A definition can have multiple terms.

Details

Toggles hidden information. Click the summary to reveal the content:

<details>
    <summary>Click to expand</summary>
    Hidden content appears here.
</details>

Table

Arranges data into rows and columns:

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

Tables can have headers (<thead>), bodies (<tbody>), footers (<tfoot>), and captions (<caption>). Use rowspan and colspan to span cells across rows or columns.

HTML5 Tags

Before HTML5, pages were marked up with generic <div> and <span> tags. The code itself couldn’t indicate what the content meant.

HTML5 introduced semantic tags that help organize documents meaningfully. You can now tell header content from article content by looking at the tags alone.

Document Layout

<main>
    <section>
        <header>
            <h1>Page Title</h1>
        </header>
        <article>
            <p>Content goes here.</p>
            <aside>
                <p>Related content.</p>
            </aside>
        </article>
        <footer>
        </footer>
    </section>
</main>

main—the main content of the page. Use only once per page. Cannot be inside article, aside, footer, header, or nav.

section—a generic section of the document. Use with headlines to indicate structure.

article—independent, self-contained content like a blog post or news article.

aside—content tangentially related to the main content.

header—introductory content or navigation.

footer—footer for a section. Often contains author info, copyright, related links.

nav—navigation links.

Navigation

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
    </ul>
</nav>

Figures

<figure>
    <img src="example.jpg" alt="Description">
    <figcaption>Caption for the image.</figcaption>
</figure>

figure—self-contained content referenced from the main flow.

figcaption—caption for the figure.

Other Useful HTML5 Elements

hgroup—groups related headlines.

wbr—word break opportunity. Suggests where a line break could occur in long words.

picture—container for multiple image sources. Lets browsers choose which image to display based on screen size or resolution.

Basic HTML5 Template

Copy and paste this into a new file to get started:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
</head>
<body>
    <main>
        <header>
            <h1>Headline</h1>
        </header>
        <article>
            <p>Your content here.</p>
        </article>
        <footer>
        </footer>
    </main>
</body>
</html>

Repetition will make this feel natural. The more you code, the easier it becomes.

Comments are closed.