RubyPlayzz’s Guide To HTML

Hey there! Wanna learn coding a website? Don’t want it to take forever to start making simple HTML websites? Wanna make coding easy?

Well than look no further! In this article I am going to teach you HTML from an experienced coder (who originally created the html for the article layouts).

Most of the code here examples are editable, so you can try messing around and editing them.

If you're interested in learning HTML completely, how to make your own site, or CSS and Javascript, check out the MDN Web Docs basic HTML course.

1. The Basics

So to start this off, we'll learn the basics of HTML.

Making an element

To start this off you need to know how to make a basic element like this:

HTML

Reset

Loading Editor...

Try changing "Reginald is in the floor." to something else.

You first have to do the opening tag. The text inside corresponds to what type of element it is (p for paragraph, in this case.)

Once you enter the content of your tag, you close the tag by repeating what you did for the opening tag, but adding a backslash (/) before the letter

Attributes

Elements can also have attributes:

<p class='note'>Reginald is in the floor.</p>

Attributes can be very useful. They give extra information to an element.

In this example, the class attribute is added to the element, which is used to identify an element so it can be styled.

Some elements require attributes to be visible, for example img elements. You'll learn more about these soon.

2. Text

We've already learned how to add a paragraph like this:

HTML

Reset

Loading Editor...

But our page would look boring and harder to read if it was all just paragraphs. We can use <h1> tags (short for heading 1). We can also use <h2>, <h3>, <h4>, <h5> and <h6> for headings at lower levels.

HTML

Reset

Loading Editor...

Now if you want to add italic, bold or underlined text, you can put these tags in with the text. For italic you use <em> or <i>, for bold you would use <strong> or <b> and to underline your text you can use <mark> or <u>, Here’s an example

HTML

Reset

Loading Editor...

You can also use <b> tags for bold, <i> tags for italic and <u> tags for underlined text.

However, screenreaders (a tool used by people with visual impairments which read out the webpage) recognise <em>, <strong> and <mark> tags and read them out differently.

For this reason, its better to use those <em>, <strong> and <mark>, unless you are making text look different purely for decoration.

To add < and > without it becoming a tag, you can use < and > (lt = less than, gt = greater than)

For example: <p> would display as <p> without becoming a paragraph tag.

To add contact info for example you can use the <address> tag like this

HTML

Reset

Loading Editor...

To reference a site you can use the cite attribute, you would usually use this when you are taking a quote from a website or you are taking any piece of info/text, for example:

HTML

Reset

Loading Editor...

This is useful for quoting stuff from websites and giving them credit

To add a quote you can use the <q> tag for example:

<q>Hope is a thing with feathers, that pearches in the soul</q>

To add abbreviations you add the <abbr> tag for example:

<p>We use <abbr>HTML</abbr> to make websites using coding</p> 

You can add time using the

<time>

<time datetime='14-10-2025'>14 October 2025</time>

Finally, you can use <sub> for subscript and <sup> for superscript. This is useful for writing down dates, chemical formulae and mathematical equations.

HTML

Reset

Loading Editor...

3. Images

So the website still looks pretty boring with only text on it so let’s add an image, to add a image you can use the <img> tag, the <img> tag is a void element (it dosen’t have an ending tag),

For example if you have a picture called “DNN.png” this is how the code would look:

HTML

Reset

Loading Editor...

The alt attribute is important to have, as it displays if the image doesn't load.
It is also used by people with visual impairments so they know what the image is.

Now let’s see how you can add a caption to your image, resize your image and give it a title.

So if you want to resize your image you just have to use width, and length like this

HTML

Reset

Loading Editor...

Now to add a caption and a title you have to make your <img> a figure by wrapping it around the <figure> tag and to give your Image a caption you give it a <figcaption> tag, here’s how all that looks like

HTML

Reset

Loading Editor...

4. Tables, Links, Forms, Buttons and Lists

So to add a table you use the <table>, <td> (Table Data), <tr> (Table Row) and <th> (Table Header) tags, You use <table> to indicate it’s a table, Use <td> for putting in the data of the table, Use <tr> to make a row and <th> as a table header, for example

HTML

Reset

Loading Editor...

Now to make a link to something we would need to use the <a> tag. You also need to add the “href” attribute to the t tag to indicate what website your referencing to.

HTML

Reset

Loading Editor...

You can also put the links into other tags

HTML

Reset

Loading Editor...

HTML

Reset

Loading Editor...

You can also make it so a title of the link appears when you hover with the mouse

HTML

Reset

Loading Editor...

Additionally you can use the <a> tag to link it to a document

Now to make a button you just use the <button> tag like this

HTML

Reset

Loading Editor...

Now moving on to lists,

Making a list of items isn’t too difficult, here’s how you do it. There is 2 different type of lists you can use, an unordered list and an ordered lists, for unordered lists you would use the <ul> tag and for ordered lists you would use the <ol> tag.

Now what is the difference between Unordered lists and ordered list? Well, an ordered list is which an order of the items does matter (e.g. Road Directions)

An unordered list is a list where the order of the items doesn’t matter (e.g. Grocery List)

To add a list item you would use the <li> tag (List Item), here’s an example of a list: <ul>

HTML

Reset

Loading Editor...

You can also nest in a ordered list in, here’s what that would look like:

HTML

Reset

Loading Editor...

In lists you can add descriptions to your lists (e.g. making a dictionary with terms), to add a descriptive list you can use the <dl> tag, to add a description term you add the <dt> and to add a description definition you add the <dd> tag, here’s an example

HTML

Reset

Loading Editor...

Now it’s time for the final section you’re going to learn in this guide,

The forms!

So to make a form you need the <form> tag and also the <input> tag, here’s most of the stuff you’ll need to know about inputs

<input type='text' name='name' id='name' required/> 

• type=“text” – It makes the input type, a basic text field
• name=“name” – Specifies a name for the data item. When the form is submitted, the data is sent in name/value pairs.
• id=“name” – Specifies an ID to identify the element. It is usually used to associate it form controls with the <label>
#
• required – Makes the input required
• For inputs there’s a few input types like, Radio (Circular Button), Colour (Colour Picker) and more

Here’s a quick example on how forms look like:

HTML

Reset

Loading Editor...

As you can see, you can use labels and input tags together like that, let me explain it a bit easier

<label for='Name'>Name (Required):</label> 

This is a <label> tag and its basically just the text/label above the input type

In the <label> tag you can see for=“Name” and this is the ID you could set in the

<input> type that connects them both together

<input type='text' name='name' id='name' required /> 

This is the input field you see bellow the text/label, type=“text” just means that you can enter text, name=“name” just sets a name for the input, ID=“name” is the ID of the input where it connects up to the <label> tag and required /> just means that the input is required and then it closes off the tag to finish the input tag

Now here’s a more longer form

HTML

Reset

Loading Editor...

5. The end

Now you should know basically everything about HTML, this wasn’t a fully detailed explanation guide so I recommend you take a look at the MDN Web Docs basic HTML course

Enjoy coding!