Preview Mode: Your progress will not be saved, and certain functions are unavailable. ​Click here to sign up​ and access the full features of Cratecode.

Basic HTML

By: Cratecode

Let's take a look at some basic HTML. First, set up your HTML document. Remember, start with <!DOCTYPE html>, then create an html element with a head and body element inside it.

A lot of HTML deals with text, so we'll start off with that. Remember, content (stuff you see, e.g., text and images) goes inside of body. Here are a few of the most basic HTML text elements:

Headings

Headings are used to bring significance to some text by making the text big and bold. They come in different levels of intensity, with the biggest heading being h1, and the smallest being h6. Here's an example:

<h1>BIG HEADING</h1>
<h3>Medium Heading</h3>
<h6>little heading</h6>

Paragraphs

Paragraphs are another basic text element in HTML and are used to house most kinds of texts. You can write them with the p element — here's an example:

<p>Normal text here</p>

Text Styling

HTML includes some basic elements to do text styling (bold, small, strikethrough, etc.). These should be inside another text element, such as a p. Here's a little list (although there are many, many more that aren't included):

  • b - makes text bold.
  • i - will italicize text.
  • s - renders a line (strikethrough) through some text.
  • small - makes text smaller.

Here's an example of using them:

<p>
    <s
        ><b>ERROR:</b> Service <i>error-prone service</i> encountered an
        error.</s
    >
    <b>ERROR RESOLVED</b>
</p>

Project

Try using these elements to create a little story with enhanced styling. It could be about anything, but here are some ideas if you get stuck:

  • Your experience learning programming.
  • One of your favorite activities.
  • What you want to do in the future.

Anything goes, make sure to use at least one element from each category (though I'd encourage you to do more than one). Mess around with it and see what you can do with these elements, and remember, every website is built using HTML. If you get stuck, take a look at the example HTML document in the previous lesson. Good luck!

Also, here's an HTML cheatsheet with a list of HTML elements: HTML Cheatsheet.

Hey there! Enjoyed the lesson? Consider sharing it with others - it's a huge help and lets us keep making them!

Edit this lesson

AI Assistant

Basic HTML