HTML Reference

HyperText Markup Language, commonly abbreviated as HTML, is the standard markup language used to create web pages and web applications. It is typically used in conjunction with CSS (for styling and layouts), and JavaScript (for interactivity).

HTML files control the content and structure of a web page. These files are text files that gets interpreted by a web browser (such as Safari, Chrome, and Firefox). For example, when you surf the web in your daily life and open a new web page, your browser pulls an HTML text file down from a server, interprets it, and then renders (draws) the resulting web page on the screen, according to the instructions in the HTML file (Source: ASP Overview).

As you begin writing your own HTML files, keep in mind that what you’re really doing is writing browser instructions in one of the languages (HTML) a browser can understand. Therefore, you have to understand the rules and vocabulary of the language in order to create effective HTML browser instructions (files). In many ways, learning HTML is a lot like learning any other language, and is best learned “in context,” and through practice – much like many language immersion programs (Spanish, Chinese, French, etc.) are taught.

Learning HTML requires three main kinds of knowledge:

  1. An understanding of the general rules for using the language, including understanding how to use tags, attributes, values, and content (text and/or nested HTML tags) correctly. Think of these skills as HTML grammar.
  2. An understanding of some of the core tags of the language, and what they do. Think of these skills as HTML vocabulary.
  3. Finally, an understanding of how to seek out and effectively use information and resources.

Rules of Thumb

Most of the HTML language is best learned through practice, however below are ten rules of thumb that can help you learn how to use the tags to create the desired result.

References: For more information, watch the LinkedIn Learning video tutorials:

1. Avoid spaces, capital letters, and special characters when naming files

When creating new HTML files, it is important to follow the naming conventions listed below:

  1. No whitespace
    Rename page 1.html → page_1.html or page1.html
  2. No capitalization; all lowercase
    Rename Page1.html → page1.html
  3. No special characters (‘,*!^%#). Dashes & underscores are OK
    Rename Jenny's Page!.html → jennys_page.html In addition, all HTML files end with either the .htm or .html file extension.

2. Most tags have an opening tag and a closing tag

For instance:

<h1>My Title</h1>

But some don’t:

Images: <img src="dog.png">
Line Breaks:	<br>
Horizontal Rules: <hr>
Stylesheet Links: <link rel="stylesheet" href="my_style.css">

You’ll eventually figure out the rules as you continue building web pages. You can also consult the HTML Reference to learn more about the rules of each individual tag.

3. The browser ignores white space

The browser ignores white space, which means that the following line of code:

<h1>My Heading</h1>

is interpreted the same way as:

<h1> My
Heading</h1>

or:

<h1> 
    
    
    My Heading
    
    
</h1>

4. Make your code readable by indenting and using line breaks

Please don’t do this:

<div><p>Welcome, <strong>Leonard</strong></p><ol><li>item 1</li><li>item2</li><li>item 3</li>
</ol></div>

Instead, do this:

<div>
    <p>
        Welcome, <strong>Leonard</strong>
    </p>
    <ol>
        <li>item 1</li>
        <li>item2</li>
        <li>item 3</li>
    </ol>
</div>

5. Attribute syntax

Attributes are always followed by an equals sign and values are surrounded by quotation marks. In the example below, src is the attribute, and my_image is the value. Note that my_image is surrounded by quotes.

<img src="my_image.jpg">

6. Last in, first out (LIFO)

Last in, first out (LIFO) means that you close tags in the opposite order that you opened them in. So, if the last tag you opened was the <strong> tag, make sure you close the strong tag before you close out any other tags.

So do this:

    <p>Welcome,
        <strong>Leonard</strong>
    </p>

Not this:

    <p>Welcome,
        <strong>Leonard</p>
    </strong>

7. Use comments to help you understand your code

Note that the phrase “Welcome section” is ignored by the browser, but is useful if you’re trying to keep track of which section is which in your HTML.

<!-- Welcome Section -->
<section>
    <p>
        Welcome, <strong>Leonard</strong>
    </p>
    <ol>
        <li>item 1</li>
        <li>item 2</li>
    </ol>
</section>

In the HTML code block below, that the link to the style sheet is specified within the <head> tag:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My first web page</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!-- YOUR HTML CODE GOES INSIDE THE BODY TAG -->
        <h1>Welcome, Maria!</h1>
        <img src="profile.png" alt="A profile picture">
    </body>
</html>

9. All visible content goes inside the <body> tag

In the HTML code block below (same as above), all of the visible content – including headers, images, paragraphs, videos, audio, etc. – goes in the <body> tag:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My first web page</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!-- YOUR HTML CODE GOES INSIDE THE BODY TAG -->
        <h1>Welcome, Maria!</h1>
        <img src="profile.png" alt="A profile picture">
    </body>
</html>

10. Use the Browser Inspector

The browser inspector helps you to inspect HTML, CSS, and JavaScript code from within the browser. This is useful for finding bugs in your code, tinkering with existing code, or exploring others’ code. To learn more about using the Browser Inspector here: https://developer.chrome.com/devtools.

Text Markup Tags

This section covers how to mark-up text using several basic HTML tags. See the Formatting Content (6:58) video from LinkedIn Learning to get an overview, and then review the HTML tags below:

1. Paragraphs

The HTML <p> element defines a paragraph. Paragraphs require an opening and a closing tag.

Additional Resources

2. Headings

Headings are defined using the <h1> to <h6> tags, where <h1> is the most important and <h6> is the least important. Like paragraphs, headings require an opening and a closing tag. Headings show document structure: users skim web pages by looking at the headings, and search engines use them to index the structure and content of your web pages.

Additional Resources

3. Line Breaks & White Space

Line breaks are defined using the <br> tag. Use this tag if you want force a line break (a new line) without starting a new paragraph.

Additional Resources

4. Text Emphasis

<span>, <em>, and <strong> tags are frequently used to highlight or emphasize text.

Additional Resources

5. Horizontal Rules

<hr> tags are used to create separators.

Additional Resources

Overview Resources

Linking to pages within your own site

Linking to external pages

Additional Resources

Linking to page regions

Additional Resources

The links in this example don’t link to anything (yet), but is meant to show that div and span tags can be useful for grouping links into conceptual widgets (like menus)

Image Tags

Overview Resources

Media Tags

In the previous section, we reviewed the simplest and most frequently used tags: <h1>, <h2>...<h6>, <p>, <a>, <img>

In this section, we add to this list by including iframes, audio files, videos, lists, and tables. Below we provide a description of each element, as well as the tags, attributes, and values that generate them. Each element also has a corresponding code sample that you can continue exploring on your own.

IFrames

Sample code to make an IFrame (to embed another web page).

Other Websites

Note: This page blocks IFrames, so you’ll have to view this code in CodePen.io

Spotify

Vimeo & YouTube

Audio

Sample code to embed an audio file (new in HTML5):

Video

Sample code to embed a video file (new in HTML5):

Compound Tags

Lists

Sample code to make ordered and un-ordered lists:

Tables

Sample code to make a table:

Semantic Tags

Reference Videos & Readings

Semantic elements clearly describe the purpose of the tag in the tag itself, and are new in HTML5. <header>, <nav>, <section>, <article>, <footer>, <aside>, etc. are examples of semantic tags. Semantic tags are useful for grouping your page into logical sections that are easy for a screen reader or web crawler to interpret.

Example 1: Simple

|---------------------------------|
|             <header>            |
|-----------|---------------------|
| <nav>     | <section>           |
|-----------|---------------------|
|             <footer>            |
|---------------------------------|

Example 2: More Complicated

|---------------------------------|
|             <header>            |
|---------------------------------|
|               <nav>             |
|-----------------|---------------|
| <section>       |               |
|-----------------| <aside>       |
| <article>       |               |
|-----------------|---------------|
|             <footer>            |
|---------------------------------|

Form Tags

Forms are use to gather information from a user, and typically post user information to a server that is expecting it. We will cover this in more detail when we get to our HTTP / REST unit.

Additional Resources

This reference guide sourced from Dr. Sarah Van Wart.

results matching ""

    No results matching ""