Basic Webpage

You can make a basic webpage with just a few lines of HTML.
Here’s a minimum framework to get started. Copy this into a text editor, save it as index.html, and open it in your web browser.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

What the parts mean

  • <!DOCTYPE html> Tells the browser this is an HTML page.
  • <body>… </body> Contains everything visitors will actually see.
  • <html> … </html> Wraps your whole page.
  • <head> Holds information about the page (like the title).
    • Nothing is visible from the head section in your webpage.
    • The meta tag in the <head> section defines metadata about the webpage, such as the character encoding, author, and description.
    • charset="utf-8" defines which characters can be used on your website. For example, some character sets include only basic Latin letters, while others include Japanese Kanji. Here, we are using the UTF-8 character set.
    • <title>. Search engines will use this title to categorize your website, and the browser will use this title to label the browser tab.

HTML Comments

Although not required in the framework, you may like to use HTML comments to leaves notes in the code, both for yourself and for others to read. The comments are not visible in the web browser. HTML comments begin with <!-- and end with -->.

The example below shows the usage of a comment. 

<!-- Note to self: 
     include a short bio in this paragraph. -->
	 
<p>Hello, world.</p>

Besides adding messages for future coders (or yourself) to look at, comments are useful for temporarily removing parts of your code. Would you like to see what your page looks like without one of your paragraphs, but you aren’t ready to remove the code entirely? Just comment it out!

HTML Tags

Once you have your framework, you can add elements inside thebody.

HTML tags change different parts of your content to make it appear or act in a certain way.
Tags can:

  • Display text, images, and links
  • Define areas of your website such as “the header”, “the navigation menu”, or “the main content column”,
  • Add formatting or functionality

Tag syntax

  • HTML tags are always enclosed in angle brackets (< and >). Anything within these is interpreted as a tag rather than as textual information.
  • Many come in pairs: For example, p is the tag for paragraph. You open with <p>, and close with a slash </p>.
    • Example: <p>Hello, world.</p>
  • Self-closing tags begin with an opening angle bracket (<), followed by the tag’s name in lowercase letters, followed by a forward slash (/) and a closing angle bracket (>). Examples include: <br/> for a line break or <img/> for an image.

Nested Tags

You can nest tags inside other tags, e.g.,

For example, you might nest a <br/> inside a paragraph to create a line break.

<p>
    Hello, <br/>World.
</p>

Example of paired tags nested:

<p>
Hello <strong>world</strong>
</p>

Tags with Attributes

HTML tag attributes give extra details, like a link’s destination or image alt text description.

Attributes use this format: <tagname attribute="value">

  • The attribute comes after the tag name
  • Values go in quotes
  • If tag has more than one attribute, each attribute-value pair is separated from the others by a space.
  • Only the opening tag gets attributes

Example: This shows the syntactical formatting of a paired tag with an attribute. 

<a href="http://google.com">Google Homepage</a>

The following example shows the syntactical formatting of a self-closing tag with two attributes.

<img src="puppies.jpg" alt="Puppies playing." />

Basic Text and Formatting Tags

Browsers use tags to display your content appropriately, often adding default spacing or styling.

  • <p>. The paired paragraph tag is a single, self-contained paragraph. Paragraphs are “block-level” elements, meaning they typically start on a new line and take up the full available width, with space above and below.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Paired heading tags define titles and subtitles for sections of your page. <h1> is the largest and most important heading, while <h6> is the smallest. Headings are block-level elements.
  • <br/>. Unlike in a text editor, simply pressing Enter in your HTML code doesn’t create a new line on the web page. Use the self-closing <br/> tag to explicitly force a line break within a block of text.
  • <hr/>. The self-closing horizontal rule tag creates a full-width horizontal line, to be used as a content divider. The horizontal rule automatically adds space above and below, ensuring that nothing else is on the same line.

The following code:

<h1>Main Page Title</h1>
<h2>Section Subtitle</h2>

<p>Hello, world.<br/>This is on a new line.</p>

<hr/>

<p>This is a paragraph after a horizontal rule.</p>


Would produce the result we demonstrate in the box:

Main Page Title

Section Subtitle

Hello, world.
This is on a new line.

This is a paragraph after a horizontal rule.

Semantic Text Formatting

HTML also offers tags to add semantic meaning or visual emphasis to specific words or phrases within your text. While browsers often render these with bolding or italics, their primary purpose is to convey importance or emphasis. All of the following are paired tags.

  • <strong>: Marks text as strongly important (usually displayed in bold).
  • <em>: Emphasizes text (usually displayed in italics).
  • <ins>: Indicates inserted text (usually underlined).
  • <del>: Indicates deleted or outdated text (usually struck through).
  • <sup> (Superscript) and <sub> (Subscript): Render text slightly smaller and raised (like this) or lowered (like this) from the baseline, often used for mathematical formulas, chemical compounds, or footnotes.
<p>
    This text is <strong>very important</strong>, while this is <em>emphasized</em>.
    The equation is E = mc<sup>2</sup>, and H<sub>2</sub>O is water.
</p>

The code above yields this output:

This text is very important, while this is emphasized. The equation is E = mc2, and H2O is water.

Caution: While older tags like <b> (bold), <i> (italic), and <u> (underline) exist, it’s best practice to use <strong>, <em>, <ins>, and <del> instead. These newer tags provide semantic meaning, which is better for accessibility and web standards.

Exercises

You can try out HTML directly by typing your work in the W3 HTML Editor.

  1. If a>0 and a≠1, the exponential f(x)=ax has an inverse function f-1(y) = loga(y). Write this out using the tags you’ve just learned.
  2. A circle is all the points in a plane that are at a given distance (radius) from the center. You may be familiar with the equation x^2+y^2=r^2. Rewrite the equation using superscripts.
  3. Vectors are sometimes denoted using bold script, for example if you want the cross product i × j = k. Write out a cross product using the <b> or <strong> tag.
  4. B(t) =T(t) × N(t). (Binormal vectors — a calculus 3 topic). Write this equation out with bolding for the vectors and italicizing the (t).