Introduction to HTML

You might be interested in learning how to build webpages, especially if you're a beginner.In this article, we're going to talk about some of the basics you need to know before you start building webpages.

Imagine a document you create with a word processor like Microsoft Word or Google Docs. These documents usually have more than one formatting style. They have different font sizes to specify sections of text, like headers, main content, footers, tables of contents, and captions.

In contrast to we as humans who can simply glance at a document and comprehend the difference between a heading and a paragraph, computers lack this sense(yh! we are superior). In order for a browser to render content correctly, each piece of content must be explicitly specified.

Defining structure using HTML elements

What's the best way to clearly tell a browser what's your content is? It's a matter of using Hyper Text Markup Language (HTML). HTML is a markup language that describes the structure and layout of your web page. Typically, we define the structure of our websites in terms of using HTML elements. An HTML element is made up of tags, which serve as descriptors for the various content items on your website. For example, the <p> tag describes a paragraph HTML element. There are many other HTML elements, including

  • <h1>: Highest-level heading
  • <h6>: Lowest-level heading
  • <img>: An image
  • <a>: anchors that link to things such as other HTML pages, files, emails, and more.

Most HTML elements contain both opening and closing tags to specify the beginning and ending of the elements. For example where <p> is the opening tag and </P> is the closing tag; <p>This is a paragraph element.</p>

A few exceptions exist such as the <img> tag, which we will discuss in next articles.

A Basic HTML File

As a starting point for understanding how markup defines the structure of a web page, let's explore this basic HTML file:

My basic webpage by Damilare

My first HTML file

Great! Am one step away from creating my own webpages.

In this file, the first line, , is the doctype declaration. This tells a browser what HTML version the file is written in and for this file, HTML indicates that it is HTML5.

Hey, do you Observe that the closing tag for the second line is on the last line of the file. HTML elements have the capability of nesting, that is, being nested within other HTML elements.

As you may know (oh! Just knowing?), the root element of an HTML file is indicated by the tag <html>. A proper HTML file must contain the elements <head> and <body> within the root element <html>.

In order to be complete, the <head> element must contain a <title> (to identify the name of the webpage) directly beneath the <head> element, which are known to be it's Metadata. The <head> element may also contain links to JavaScript files and CSS stylesheets.

Within an HTML file, there can only be a single <body> element. This element contains the information that is rendered by your web browser. Most HTML code you write will reside within this element.

This file's <body> element contains a high-level heading <h1> and a paragraph <p>.

Rendering this HTML file in the browser

Here is how our HTML file above will be displayed by a browser.

We have now covered the basics of HTML, so let's learn how to add attributes to an HTML element and how to use hyperlinks.

We have now covered the basics of HTML, so let's learn how to add attributes to an HTML element and how to use hyperlinks.

Oh wait! Does this looks boring, won't you feel excited when you will get to know how to code beautiful websites and make cash? Then follow and practice as we are going learn how to do so.

You've successfully subscribed to Leewardslope
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.