Writing in HTML might seem too complex, but that’s not how it is. You don’t need to be a programmer to make small changes to your site. Essentially, anyone can do it.

As soon as you take an HTML course, everything will make sense; you’ll understand HTML shortcuts in no time and distinguish tags and content as the main elements.

But the question is, why would you need to learn HTML (Hypertext Markup Language)?

In reality, bringing ideas to life isn’t always fast and easy. Explaining everything to your developer might be time-consuming, and in the end, you might lose points in translation. Furthermore, what if you need a quick edit, but your developer is unavailable?

Having HTML in your toolkit will eliminate the dependency on others – with the proper HTML skills, you’ll effortlessly bring your vision to reality. Understanding basic HTML will enable you to code websites and adjust scripts, which will open up many opportunities for your business.

Whether you want to update content to your pure-HTML site, change your text within the WordPress theme, or switch out an image, I got you!

The following article will deal with the most basic HTML actions to allow anyone with a website to perform simple updating actions. If you are an absolute novice to HTML, our step-by-step guide can quickly turn you from a wannabe to a “master” of web development. By the end of it, you’ll grasp what you see when you look at an HTML code, say in a blog template in your CMS.

What Is HTML?

HTML (Hyper Text Markup Language) refers to the formatting system for displaying materials retrieved over the World Wide Web. This standard markup language enables designed documents to be displayed in web browsers. HTML5 is the latest available version.

Simply put, HTML controls the web browser (Mozilla Firefox, Google Chrome, etc.) and tells it what to do. It defines the content you see on any web page you visit.

Individuals and businesses use HTML to create web pages, also known as retrieval units, and make them functional. In reality, 94.5% of all websites use HTML, while 90.7% use HTML5 as markup language on the web.

In general, people consider HTML as a ‘coding language.’ However, it’s not a very powerful one. Without Java or CSS, computers can perform more tasks than HTML can handle on its own.

HTML for Beginners

As a beginner, you can find numerous articles on learning HTML. However, you don’t need mind-boggling theories and an in-depth understanding of CSS or JavaScript. What you need is simplicity!

This HTML tutorial for beginners will focus on giving you practical skills and show you ‘how’ to create your first web page. I’ve eliminated the extensive use of ‘whys’ for the sake of time and ease of understanding.

What are Tags and Attributes?

HTML defines the web pages’ content using tags. There are loads of tags in practice, including singular tags, opening tags, closing tags, basic HTML root tags, formatting tags, audio, video tags, form and input tags, frame tags, link tags, list tags, table tags, style tags, meta tags, etc. However, unless you plan on becoming a pro in web development, you don’t need them all. It would be best if you simply learned the basics.

An HTML element consists of tags and content; more precisely, a start tag, attributes, end tag, and content. That’s why almost every HTML tutorial for beginners starts with explaining the most commonly used tags.

Tags mark up the start of an HTML element, defining general blocks of text. They give the document structure, and you can add content between them. Usually, tags are enclosed in angle brackets, such as <p> or <h1>.

You’ll have to use an opening tag paired with a closing tag in most cases. The latter uses a ‘/’ character to differentiate itself. For instance, you’ll open the HTML element with <h1> and close it with </h1>.

A tag takes the following form: <p> TEXT </p>

However, some exceptions, aka singular tags, open and close themselves.

Tags can also have attributes with additional pieces of information that have a variety of uses. They take the form of an opening tag and place extra data inside the tag. Mostly, people use attributes, such as the “class=” attribute, to make one paragraph different from another.

An attribute takes the following form: <p class=”intro-text”> TEXT </p>

The next step is using CSS to design the intro-text, but that’s essentially next level.

Basic Rules to Remember

1. Most opening tags (<tag>) will need a closing tag that matches (</tag>). Remember to use a backslash before the closing tag after the content.
2. If you use multiple tags, you have to open and close the tags in the same order; <tag1><tag2> Your content goes here </tag2></tag1>

HTML Editors

An HTML editor will be convenient if you want to write code in HTML, structure, and create your site. Sure, you can use any standard text editor for this cause. However, specialized HTML editors demonstrate significant ease of use, convenience, and added functionality.

In general, you can choose from two broadly used types of HTML editors:

• Textual HTML Editor: Using text-based editors, you need to write and compile codes, which requires basic knowledge of HTML. These tools also grant you features to develop your project, manage files, and more.
• WYSIWYG HTML Editor: ‘What you see is what you get’ editors preview how the source code would appear on the browser, making them perfect for non-technical users. If you have no prior web development experience or HTML knowledge, you could also use drag and drop functionality, available in most WYSIWYG editors.

You might find it challenging to choose the best HTML editor. Here’s my recommendation to make your decision easier.

Notepad ++

Notepad++ is one of the most popular textual HTML editors written in C++. It uses ‘Scintilla’ as the editing component. It’s available as free software, open-source, multi-language code editor.

Notepad++ retains the familiarity of Notepad. However, it has the capability of a basic IDE, making it better than the standard text editor.

I’ve compiled the most important advantages and disadvantages of Notepad++.

Pros:

Cons:

Sublime Text

Sublime Text is a Shareware cross-platform source code editor with Python API. It has native support for many programming and markup languages and enables you to expand functionality with plugins.

Unlike Notepad++, Sublime Text offers Windows, Linux, and Mac support. It simplifies writing code by tag and syntax highlighting and autocompletion. It also supports a wide range of plugins and integrations, being especially easy to navigate and control.

Here are the main reasons why you should select or avoid Sublime Text.

Pros:

Cons:

Atom

Atom is the best WYSIWYG HTML editor that will save you 10x the time when coding. It’s a desktop app built with HTML5, JavaScript, CSS, and Node.js integration.

You can choose from thousands of open-source packages or build a package from scratch, select from four UI and eight syntax pre-installed themes in both dark and light colors, install ones from its community or create your own.

It’s easy to customize and style Atom; you can tweak the look and feel of your UI with CSS/Less and add major features with HTML and JavaScript.

Don’t rush in and make a decision; take your time and review Atom’s main pros and cons.

Pros:

Cons:

Creating Your First HTML Webpage

I believe you are on the right path to learn HTML for free. The next stop on my way is teaching you how to create your first-ever HTML page.

Here’s how a basic, bare-bones HTML5 page would look like:

<!DOCTYPE html>

<html>

<head>

<title>TEXT</title>

</head>

<body>

</body>

</html>

First, <!DOCTYPE html> shows that it comes to an HTML site. The browser recognizes HTML web pages using this first line of code. It appears only once before any <html> tags at the top of the page. It’s also not case-sensitive.

Next, <html> highlights the beginning and ending on the page. Everything in between these points is written in HTML code. Each document begins with <html> and ends with </html>.

<head> holds the metadata for the page; information for search engines and other programs. Users won’t be able to see the data you put within this section. Well, at least for the title displayed in the browser’s user interface.

You can also add link tags and meta tags within the <head> section. In the first case scenario, the tag would establish a relationship between the two files and load them both. Meta tags, in turn, are convenient for adding page descriptions and keywords for better rankings on search engines.

The <body> section is where you add all content; it’s the visible part of your document.

Image by w3schools.com

Additional and Important Tags (Also For SEO)

Within the <head> section, you should always include the <title> tag, but you can also add <meta> tags, as explained earlier.

The text you insert inside the <title> tag will appear at the top of the browser window.

Character encoding, page context, description, fall under the <meta> section.

Text Body, Headlines, and Styling

There’s no point in learning HTML (Hypertext Markup Language) without understanding the importance of the <body> tag. It is the most important section for the reader because it’s the only thing they’ll see.

The Place to Put All Your Visible Content on The Page

The rule of thumb is to put all content between <body> and </body>. I hope you’ve learned today that you have an opening and a closing tag, which applies to your text body.

The <body> section consists of everything visible to the human eye, including text, images, tables, forms, and so on.

But if you scroll the Internet daily, you are well aware that long, plain text just doesn’t cut it. Structuring your text using paragraphs or <p> is the right way to do so. The <p> tag defines HTML paragraphs. Its closing tag is </p>.

Here is an excerpt of how the <body> tag looks like:

<body>

<header>

<h1>Global Warming</h1>

</header>

<section class="pagecontent">

<p>Some text about global warming</p>

</section>

<footer>Copyright &copy; …</footer>

</body>

Make Your Page Clearer with Headings and Subheadings

To skim the article more efficiently, you’ll need formatting that far exceeds the basic paragraphs. Here’s where the headings come into play.

HTML headings and subheadings are defined with the <h1> to <h6> tags, from most to least important.

The best way to understand this concept is to imagine a pyramid. Heading 1 will only appear once at the top of the page. Heading 2 represents a sub-theme of Heading 1. Heading 3 represents a sub-theme of Heading 2, and so on.

As you could spot, H1s are the biggest, meaning highest level headings. It would be best to use the H1 for the most important title or website logo, followed by sub-headings (H2s and H3s) and less important text (H4s, H5s, and H6s). Heading 6 is essentially the lowest-level heading.

These headlines allow the reader and the bots of the search engines to understand the importance of the topics in the text. Therefore, it is vital to keep them in mind both in terms of user experience and their contribution to your SEO.

Styling Tags:

Web development makes no sense without creativity, right? In this HTML online course, I want to show you that you control the text that appears on your page, and you can use HTML5 to make it look a certain way. Here are the most popular tags for the cause:

How to Add Links (or Hyperlinks) In HTML?

Whether internal or external, the web is filled with hyperlinks. You click on one place, and it takes you to another. You can link to other content on the same web page, other web pages on the same website, or another site altogether.

At this point, you should differentiate between absolute and relative URLs:

• An absolute URL contains the necessary information to locate a resource, meaning it will always include the website’s domain name with http://www.
• A relative URL uses an absolute URL as a starting point to locate a source. It shows the path to the file or refers to the file itself.

You should always use the full URL when you want to link to another website in HTML (external link). In this case, HTML links are defined with the <a> tag in the following form:

<a href="https://www.google.com">Your Text</a>

The first part, the href attribute, specifies the link’s destination. Once a person clicks the link, it will take them to that page. The second part of the attribute, Your Text, shows the text displayed on your site to entice visitors to click the link.

If, however, you want to link to another page on your website (internal link), you can use the <a> tag in the following form:

<a href=”mylinkedpage.html”>Link Text</a>

How to Present Pictures in HTML?

My free HTML course will also teach you how to add images in HTML to your site. I was honest when I said you’ll learn HTML for free. Don’t worry; you’ve gotten this far; just a few steps left!

As we all know, a picture is worth a thousand words. That’s why you must learn how to add them using HTML5. Fast forward, HTML images are defined with the <img> tag, and the source file (src), alternative text (alt), width, and height are its attributes.

The “src=” attribute specifies the URL of the image so that the browser can load it.

If the image cannot be displayed, the “alt=” attribute specifies an alternate text for an area.

The width attribute specifies the width of the <input> element, while the height attribute specifies the height of the <input> element.

One thing to pay attention to is the following; If you have a responsive, mobile-friendly design, you won’t always use HTML for the width and height attributes. You’ll define your images in different ways instead.

How to Insert Video On A Web Using HTML?

Who said you could not display videos in your web browser? If you haven’t got it by now, web development has no limits. HTML allows you to play videos using the <video> tag.

You can use the <video> tag to embed video content in your document, including movie clips, music videos, or other video streams.

The video tag uses the width, height, and control attributes to set the size and controls of the video.

It also contains one or more <source> tags with “src=” attributes. The browser will choose the first source it supports out of the many different video sources.

Creating Lists On HTML

You can develop three types of list formats in HTML:

• Unordered List
• Ordered List
• Definition List

You can use the HTML <ul> element to define an unordered list, also known as a bullet point list, to list things where the list’s specific order doesn’t matter. The <li> element defines the list items.

The code will take the following form:

<ul>

<li>List Item</li>

<li>List Item</li>

<li>List Item </li>

</ul>

Here’s the output:

• List Item
• List Item
• List Item

The <ul> tag will mark the items with small black circles/bullets by default. However, you can use the CSS list-style-type property to define the list item marker to take the form of circles, squares, or not to be market at all.

If you want to assign a number to every list item in ascending order, you need to use the <ol> tag to create an ordered list.

Use the <li> element in the following way:

<ol>

<li>List Item</li>

<li>List Item</li>

<li>List Item </li>

</ol>

Here’s the output:

1. List Item
2. List Item
3. List Item

You can use the type attribute of the <ol> tag to define the type of the list item marker. You can set the numbering with numbers (default), uppercase letters (A, B, C), lowercase letters (a, b, c), and uppercase roman numbers (I, II, III), or lowercase roman letters (i, ii, iii).

Finally, you can use the <dl> tag to create a definition list that allows you to create a list of terms and provide each with one or more definitions. The <dl> tag defines a description list. However, you must use it in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).

In HTML5, the ‘definition list’ has been renamed ‘description list’ to indicate that the terms and descriptions don’t have to be definitions but anything the web developer sees fit. For instance, you can use the <dl> tag to present metadata on a blog post.

You can use the <dl> tag in the following way:

<dl>

 <dt>HTML</dt>

 <dd>Definition of HTML</dd>

 <dt>CSS</dt>

 <dd>Definition of CSS</dd>

 <dt> JavaScript</dt>

 <dd>Definition of JavaScript</dd>

</dl>

Here’s the output:

HTML
Definition of HTML
CSS
Definition of CSS
JavaScript
Definition of JavaScript

Page Structure Tags

Structure tags serve as the building blocks for a web page. You can use them to define your page’s structure and layout. And while visitors cannot essentially see them, they are of key importance for both the browser and the web developer.

Here are the most common HTML5 structural elements.

<div>

In HTML, div and span tags refer to elements used to define parts of a document. You can use them to group together different parts of your web page.

The <div> tag defines a division or a section in an HTML document. You can use it for block-level organization and styling of page elements. For instance, you can use it to create two columns of paragraphs. Span elements, in turn, serve for inline organization and styling.

You can put any sort of content inside the <div> tag, style it with CSS, or manipulate it with JavaScript.

<header>

The <header> tag is used to begin an area of content. It might contain headings, images, your website’s name, logo, and other content. You might also have more than one header tag per web page.

<section>

You can define a whole lot of generic sections on your page using the <section> tag. Essentially, it refers to a thematic grouping of content, and you can use it to show blog posts separately from products or sponsors on the same web page.

<footer>

Usually, web developers use the <footer> tag to close off an area of content. This often includes copyrights, contact information, and similar data at the bottom of the web page.

<article>

The <article> tag separates stand-alone or independent elements from one another; it can be a whole page, website, document, or app.

It’s the broadest element of all, and it can contain the section, header, or footer tags to present data in a more organized manner.

<nav>

Using the <nav> tag, you can define significant navigation block links or navigation menus.

How to Close an HTML Document?

We’re slowly coming to the end of my free HTML course. You’ve learned to structure your HTML page, add content, and organize it with headings, paragraphs, lists, and more. However, my HTML tutorial for beginners wouldn’t make sense if I didn’t show you how to close the document. I promise; it’s the simplest step of all.

All you need to do to close the <body> and <html> tags on your web pages is use the following code:

</body>

</html>

And voila! You’ve made your first ever HTML web page, and that’s only the start of it. You should know that HTML (Hypertext Markup Language) is a field worth learning and exploring. Essentially, what you’ve read today doesn’t make up for 1% of it. Fortunately, you can take an HTML online course to delve into this world deeper; here’s why.

Why Should You Learn HTML?

HTML documents are all around. As I mentioned earlier, over 90% of all websites are HTML5. That’s the majority of sites you open, browse, and interact with daily. So, it only makes sense to understand the basics. It could have a huge impact on you, as well as your resume and professional doing. Simply put, understanding HTML gives you a competitive advantage.

If you are not convinced, let me explain why you should learn HTML and CSS. By understanding these languages, you’ll be able to:

• Build custom sites and understand the fundamentals of the web: Learning the basics of these languages will help you build an optimized and user-friendly website for your business. You’ll be far better off regarding design, marketing, and a few other aspects.
• Do bigger things on a budget: Sure, you can always use point and click platforms such as WordPress, Shopify, or WooCommerce. These are powerful apps that allow you to build the site of your dreams. However, if you go for a custom, DIY solution with CSS and HTML, you’ll get better customization while saving lots of money.
• Stand out from the crowd: You’ll always have a competitive advantage if you build a fully custom site with HTML and CSS. When you authentically portray your business, customers will be more attracted to buy from you, recommend you to a friend, or develop loyalty towards your brand.
• Become a more tech-savvy person: If you learn HTML, you will immediately become better at your job, whether you work as a product developer, designer, or marketer. You’ll be far better at creating and editing than most of your fellow employees, managers, competitors, or the founder itself.
• Learn other languages faster: Understanding HTML and CSS set a strong base for extending your web development skills. Once you know the basics, everything else will come as a piece of cake. The more coding languages you learn, the more new job opportunities you’ll get.
• Earn extra income outside your job: You don’t have to change your career to earn money from these languages. You can freelance your web development services to others willing to pay for your skill and work. Furthermore, you can position yourself in any way or even work as an entrepreneur.

You’ll also be able to host assets on your site, code other assets, such as software or apps, inspect web pages, administer edits without a developer, etc. The benefits of HTML are genuinely endless.

Everyone will benefit from an HTML online course, regardless of age or occupation. Whether you are the founder, intern, marketer, product developer, customer service agent, designer, or salesperson, learning HTML as a new skill will change your day-to-day work.

What to Learn Along With HTML?

It’s an excellent way to start your web development journey by learning HTML. But it doesn’t end there. It would be best to learn two other languages in conjunction with HTML, CSS and JavaScript.

As I mentioned several times in this guide, HTML can only get you so far. If you want to become a skilled developer, you’ll eventually have to add CSS and JavaScript to your portfolio.

CSS (Cascading Style Sheets) is a style sheet language that you can use to describe the presentation of your document written in HTML. Essentially, it focuses more on the document style rather than its bare structure.

JS (JavaScript) is a programming language that enables you to create dynamic content, such as animations. With JavaScript, you can boost your customers’ engagement levels and keep them on your site longer.

5 Best Places to Learn HTML and CSS Online

You’ve got it; HTML holds the key to success in today’s market. So, the only question left is, how to learn HTML for free?

Here are my top five favorite places to learn HTML online!

W3Schools – Very Easy To Learn HTML5

If I had to pick a single source for learning HTML, I would repeatedly choose W3Schools as the best free HTML course. It’s an open book, a freemium educational website for learning to code online, available entirely free.

With W3Schools, you’ll get access to a rich library with many lessons. The best part is that they continually extend the available materials, adding new content daily. You can also document your HTML knowledge with the W3Schools certification exam for $95.

Pros:

Cons:

Codecademy – Learn HTML In Nine Hours

You can learn the HTML basics for nine hours using Codecademy’s course. They’ll teach you the standard HTML tags, how to structure web pages, and create HTML tables to present tabular data efficiently.

Codecademy is one of the most popular solutions on the market. Interestingly, 5,293,189 people have taken this course, including Google, Facebook, Nasa, IBM, and Dropbox employees. It’s a beginner-friendly solution, perfect for newbies in HTML. They will teach you HTML in tiny bites, splitting the screen into two sides. You’ll immediately spot the effects of your coding, so it will be easy to move forward with the curriculum.

Pros:

Cons:

LinkedIn Learning – Formerly Lynda.com

LinkedIn Learning is an eLearning course library used mainly by enterprises and the computer software industry. It offers thousands of courses, including the HTML topic.

You can filter the results by Type (course or video), Time to Complete (from less than 10 minutes to more than 3 hours), and Level (Beginner, Intermediate and Advanced). However, only a few HTML video lessons are available for free. You’ll have to sign up for a monthly membership to get full access.

Pros:

Cons:

General Assembly Dash – Concepts & Real-Life Application

General Assembly is a pioneer in education and career transformation, providing training in today’s most in-demand skills.

Dash is a fun and free online course that teaches you the basics of web development, HTML5, CSS3, and JavaScript through projects you can do in your browser. The program is goal-based with real-world applications right out of the gate. Essentially, you’ll learn the concepts and apply them in practice.

You can also get its online HTML course with mentorship and a certificate upon completion.

Pros:

Cons:

Udacity – Beginner Skill Level

The Udacity “Intro to HTML and CSS” course is ideal for beginners willing to learn the basics using instructor videos and by doing exercises. If you haven’t programmed, this course will perfectly fit your needs, teaching you to think and engage like a programmer.

Industry professionals teach the course, consisting of four lessons; HTML Syntax, HTML Syntax Problem Set, CSS Syntax, and CSS Syntax Problem Set. They use a mix of videos, texts, quizzes, and workspaces. You’ll learn to use HTML tags and put them into practice.

Pros:

Cons:

The basic HTML concepts are simple enough. With what you’ve learned today, you can easily dig through web pages and templates and make small changes without messing up the code. Still, I would recommend you pay attention to the attributes of the tags, save often, perform backups of your original data, and ‘undo’ your every mistake. Good luck! I hope to have been of great help to you, future master of web development.