Web Design 1: HTML

Created: October 12, 2022
Updated: October 12, 2022

Introduction

Hi, this is an extremely abridged guide to HTML. The truth is, a lot of people have written much better guides on HTML! I will try to keep this as concise as possible.

Websites are made of three major "languages" - HTML, CSS, and Javascript. HTML defines the content and structure of a website, CSS defines the visuals of a website, and JS defines the functionality of a website.

Basic HTML

HTML code is stored in a file with the extension ".html". The name of the file can be anything, but when it comes to websites, the name "index.html" is special - it allows you to omit the "index.html" part in the URL! So instead of going to "website.com/index.html", you can just go to "website.com". This isn't relevant until you actually make a website, though.

Any text editor will work for "html" files, such as Notepad (or even Notepad++ if you have that!) Many developers will use special code editors such as Visual Studio Code, though.

You can also open the HTML file directly in your browser without a website. If you double click the file (and select your browser in the "open with" list, if it's not default,) it'll open right up. This is useful for basic previewing!

HTML websites consists of elements, which is like a single piece of HTML code. Elements consist of tags and the content inside the tags. Tags are surrounded in angle brackets (<>), and generally there is an "opening" and "closing" tag. For example:

<!-- This is an element -->
<span>          <!-- This is the opening tag -->
  Hello World!    <!-- This is the element's content -->
</span>         <!-- This is the closing tag -->

But what is "span"?? HTML tags are meaningful - while you technically can use anything as a tag, only a small amount have "semantic meaning" - in other words, the webpage will recognize the tag's pre-defined function. Some tags even have visual styles! Here's a few examples:

Third-level header: <h3>

(You can see the first- and second- level headers above!)

Bold: <b> or <strong> (for "attention-catching" text)

Italics: <i> or <em> (for "emphasis")

Paragraphs: <p> (groups text all in one section; there's extra space between paragraphs!)

Hyperlinks: <a> (for "anchor", which is what they're technically called)

"span" tags are "inline containers", meaning that a span will not create line breaks. A paragraph is a "block" element, so it WILL create line breaks. Another tag is the "div", which is a "block container" - like a paragraph, but not just for text.

By the way, you can also nest tags. If I bold text, this is a bold tag nested inside a paragraph tag! Here is an example of nested elements:

<div>
  <p>
    This is a paragraph!
  </p>
  <p>
    Here's another paragraph, and this one has <b>bold</b> text!
  </p>
</div>

At this stage, your HTML file does not have a CSS stylesheet. You can think of this as similar to a Microsoft Word doc or Google Document. You can create paragraphs, headings, bold, italics, links, underlines, et cetera. These elements flow down the page linearly. You can't change the color or position of anything yet besides this flow.

Structure of a webpage

A vast majority of websites have a specific structure. Generally, the entire website has a defined "DOCTYPE", and underneath the DOCTYPE the entire page is wrapped in an "html" tag. This properly defines the website as an HTML document - a browser will understand even if these tags don't exist, but it's better practice to have them.

Then, the page has a "head" element, which contains information invisible to the viewer. An example is the page's "title", which does not physically appear on the page, but shows up in the tab name of the page as a website.

Finally, there is a "body" tag, which contains the page's visible content, such as paragraphs, headers, and text.

That's a lot of information! Here is a visual example you can even copy-paste:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <p>
      Hello world!  
    </p>
  </body>
</html>

Attributes

Wait, what are those words in the brackets after the tag? Elements can have attributes, which are contained in the brackets of the opening tag. In this case, the "html" element has an attribute for language with the property "lang", and the value is set to "en". This tells machines that the page is in English!

Much like tags themselves, the attributes of an element are pre-defined, and they depend on the tag in question. For example, if you tacked a "lang" attribute on the "head" tag, it wouldn't mean anything.

Some elements use attributes to work correctly. For example, hyperlinks use a "href" attribute to point to other webpages. Here's how you define a link:

<a href="https://portfiend.quest">My link text here!</a>

This would create a link to my website! It even highlights the text blue and makes the cursor a pointer when you hover over it automatically.

More examples of HTML tags

Lists

There are two kinds of list: the "unordered list", and the "ordered list". An unordered list creates bullet points, and an ordered list uses numbers!

An unordered list is <ul> - likewise, an ordered list is <ol>. Don't forget the closing tags!

Each item in the list is a "list item", wrapped in <li> tags (for both unordered and ordered lists). Here's what the code might look like:

<ul>
  <li>Bullet point 1</li>
  <li>Bullet point 2</li>
  <li>Bullet point 3</li>
</ul>

Here is what it looks like on the page:

  • Bullet point 1
  • Bullet point 2
  • Bullet point 3

Images

Images require an attribute, like hyperlinks - specifically, the "src" attribute. Images are also special because they do not need a closing tag. Here is an example of a working image:

<img src="https://portfiend.quest/assets/img/computer.png" />

More about headers

Headers denote titles of sections of a page. Be careful not to nest a header tag inside a paragraph tag - they belong on their own!

Headers come in the format <h#>. Generally speaking, there should only be one <h1> tag - the title of your page. Major sections should use <h2> instead!

Page title

Hello world! This is a paragraph.

Section

Woah, a new section!

Here's what this would look like as code:

<h1>Page title</h1>
<p>
  Hello world! This is a paragraph.
</p>

<h2>Section</h2>
<p>
  Woah, a new section!
</p>

IMPORTANT: It can be really tempting to use headers as a way to create larger text. Don't do this! This is bad for semantics, as both web robots and screen readers will misinterpret your large text as a new section! Instead, you should learn about CSS properties, specifically the "font-size" property.

<span style="font-size: 150%">This is large text!</span>

This is large text!

Horizontal rule

Much like "img" tags, horizontal rules do not need a closing tag or contents. They are defined as "hr", and create a horizontal line in your page.

<hr>

Your first webpage

You now know enough about HTML to create your first webpage! Try giving it a go - if you don't have any ideas, I suggest a simple "about me" page. Try making different sections using headers, emphasizing certain things, creating lists of things you like, or even find a URL to an image you can embed! Here's what a starter template might look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h1>About Me</h1>
    <p>
      Hi, I'm [name]! A fact or two about myself. 
    </p>
    
    <h2>Interests and Hobbies</h2>
    <p>
      Here are some things I like, in no particular order:
    </p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>      
    </ul>
  </body>
</html>

You might already have an "about me" page on Carrd, Tumblr, or some other website - can you transfer all information into a webpage? Sure, this isn't as stylish as a Carrd, but it does help to learn HTML (and with enough web development knowledge you can DEFINITELY make better "about me" pages.)

Tutorials and Resources

You might've felt like the process of editing and previewing a website was really tedious, or that Notepad sucks for writing HTML. A lot of developers prefer Visual Studio Code, which is a special text editor that includes features like auto-complete.

VSC also has plugins/extensions to make development easier. For example, the "html live server" extension allows you to start a live server, causing your webpage preview to automatically reload whenever you save the file! This, without exaggeration, saves developers hundreds of hours in development time.

Seasoned developers might think I am an asshole for saving this information to the end. I really did not want to burden the intro with installation instructions.

Comment Box is loading comments...
back to top