HTML Basics

Personal Site →
CSS Basics →

Now that you have created your personal landing page, let's learn a little bit more about how it is structured. From Mozilla's developer docs:

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content... HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

These tags are made up of an opening tag, for instance a paragraph is <p> and closing tags, which look identical to the opening tag except they have a /. A closing paragraph tag looks like </p>. These tags are paired, so if you were to write a paragraph with HTML it would look like:

<p>My cat is very grumpy</p>

Tags are composed of 4 parts, the opening and closing tag, the the "content", and the element which is the tags + content together.

Tags can also have "attributes". These are useful for adding meta information about a tag, or are used by the browser in ways that may not be obvious to all users – such as for screenreaders.

Attributes are written inside of the tag, surrounded by spaces with attribute name followed by an equal sign. The attribute value is wrapped by opening and closing quotation marks.

Anatomy of a Page

A page consists of different tags that follow a set structure. While most tags have a specific and in-depth functionality, the most basic things to call out is the basic page structure.

The first concept to understand in this case is that tags can be nested. Meaning they can be placed within eachother. Mozilla provides the following example of adding a <strong> tag within your <p> tag:

<p>My cat is <strong>very</strong> grumpy.</p>

This nesting structure of tags allows you to structure your page with <header>s, <main> and less important <section>s of your site, and more granular typographic and descriptive elements.

What is most notable however is that all HTML documents have a <head> which contains meta information and is not rendered in the browser. And a <body> which is what we see in the browser window when we load a webpage.

Images

Images are accessed via the <img> tag. <img> tags are special because they are self-closing tags, which means they aren't in pairs and have a / at the end of the single tag (<img />). To load an image on your page, add an <img> tag with a src attribute whose value leads to the path of the image:

<img src="my-image.jpg" />

The image you want to reference can either be on your computer, or somewhere on the web. If it's on the WWW you can add the file path to a server online (if you open an image in its own tab, you can grab it's path in the address bar, or you can right click and "Copy Image Address" to get the url).

If the image file is on your computer, link to it relative to your html file. If it's in the same folder, you can just write the filename (<img src="my-image.jpg />). If it's in another folder, you'll need to traverse your files to find it.

Links

Like images, links are special tags whose attributes reference another location on the web. In this case, either another file, location on a webpage, or a state of a page.

Links are written as the <a> tag, whose href attribute links to its destination. A complete <a> tag is as follows:

<a href="https://en.wikipedia.org/wiki/Reality_Checkpoint">
    Reality Checkpoint
</a>

The text in between the opening and closing <a> tags are what's rendered on the page, and the href is the links destination.

Try altering the <a> tag in the list of your favorite things on your personal landing page to go to your real favorite website.

Common Tags

There are a set of common and essential HTML tags that make up every web page. These provide hierarchy with different levels of headings (<h1><h2><h3>), allow you to make lists (<ol>, <ul>, <li>) and have many other functions.

<html>
<head>
<body>
<h1><h2><h3>
<p>
<strong>
<em>
<br />
<ol>, <ul>, <li>

Familiarize yourself with the full breadth of HTML tags:

HTML Elements Reference

And try adding them to your page in order to experiment.

Next Steps

This is the very basics of HTML and webpages. To delve further visit Mozilla's HTML Basics webpage (heavily referenced here), and try the Codecademy: Learn HTML module.