Creating Your First HTML Webpage

First off, you need to open your HTML editor, where you will find a clean white page on which to write your code.

From there you need to layout your page with the following tags.

Basic Construction of an HTML Page

These tags should be placed underneath each other at the top of every HTML page that you create.

<!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the language is HTML 5.

<html> — This tag signals that from here on we are going to write in HTML code.

<head> — This is where all the metadata for the page goes — stuff mostly meant for search engines and other computer programs.

<body> — This is where the content of the page goes.

HTML Structure
This is how your average HTML page is structured visually.

Further Tags

Inside the <head> tag, there is one tag that is always included: <title>, but there are others that are just as important:<title>This is where we insert the page name as it will appear at the top of the browser window or tab.<meta>This is where information about the document is stored: character encoding, name (page context), description.

Let’s try out a basic <head> section:

<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This field contains information about your page. It is usually around two sentences long.">.
<meta name="author" content="Conor Sheils">

Adding Content

Next, we will make <body> tag.

The HTML <body> is where we add the content which is designed for viewing by human eyes.

This includes text, images, tables, forms and everything else that we see on the internet each day.

How to Add HTML Headings To Your Web Page

In HTML, headings are written in the following elements:

  • <h1>
    • <h2>
      • <h3>
        • <h4>
          • <h5>
            • <h6>

As you might have guessed <h1> and <h2> should be used for the most important titles, while the remaining tags should be used for sub-headings and less important text.

Search engine bots use this order when deciphering which information is most important on a page.

Creating Your Heading

Let’s try it out. On a new line in the HTML editor, type:

<h1>Welcome to My Page</h1>

And hit save. We will save this file as “index.html” in a new folder called “my webpage.”

The Moment of Truth: Click the newly saved file and your first ever web page should open in your default browser. It may not be pretty it’s yours… all yours. *Evil laugh*

Well let’s not get carried away; we’ve still got loads of great features that we can add to your page.

How To Add Text In HTML

Adding text to our HTML page is simple using an element opened with the tag <p> which creates a new paragraph. We place all of our regular text inside the element <p>.

When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way.

Other Key Elements

They are as follows:

<b>BoldHighlight important information
<strong>StrongSimilarly to bold, to highlight key text
<i>ItalicTo denote text
<em>Emphasised TextUsually used as image captions
<mark>Marked TextHighlight the background of the text
<small>Small TextTo shrink the text
<strike>Striked Out TextTo place a horizontal line across the text
<u>Underlined TextUsed for links or text highlights
<ins>Inserted TextDisplayed with an underline to show an inserted text
<sub>Subscript TextTypographical stylistic choice
<sup>Superscript TextAnother typographical presentation style

These tags must be opened and closed around the text in question.

Let’s try it out. On a new line in the HTML editor, type the following HTML code:

<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>

Don’t forget to hit save and then refresh the page in your browser to see the results.

Related Posts

Beginner’s Guide to Sass

Have you ever wondered what SASS stands for? Or perhaps you already know what it is but haven’t taken the time to study and use it. Whether…

Responsive Web Design – Modern Website Code for Beginners

When the internet was still young, website visitors used desktop and then laptop computers with wide screens to access websites. Then when smart phones were developed, mobile…

Beginner’s Guide to React

React is a JavaScript library that aims to simplify the development of visual interfaces. Developed at Facebook and released to the world in 2013, it drives some…

Server-Side Rendering (SSR) Made Easy With Angular Universal 9+

The Angular team recently, announced a pre-render builder in Angular Universal, in Jan 2020 to be specific. Angular Universal is for server-side rending (SSR); with these new…

Why Should I Use HTML5?

The most straight-forward answer to that question is simply that it is the current, “right” version of the language. But some people seem unconvinced by this fact….

What is HTML5?

HTML5 is the latest specification of the HTML language, and represented a major break with previous markup practices. The purpose of the profound changes to the language was…