An Introduction to HTML Basics for Beginners

If you're interested in web development or coding, HTML is a great language to start with. It serves as the foundation for every web page, allowing us to structure and display content such as paragraphs, headings, images, links, lists, forms, and more.

In this beginner's guide, we'll cover the purpose of HTML and provide a simple overview of writing basic HTML code. We'll also review some of its most important elements and attributes.

HTML stands for "HyperText Markup Language." Let's break down this acronym to better understand its meaning.

The "HyperText" refers to text that contains references to other web pages, commonly known as hyperlinks. These links enable us to easily navigate the web and access a wide range of information from around the world.

The internet and HTML have revolutionized the way we access and share information, providing the flexibility for users to access it in any order they choose.

While "Language" may seem straightforward, experts continue to debate whether HTML should be classified as a "programming" language. Some argue that it is a "markup" language, not a programming language, while others believe it can be both.

Unlike other programming languages such as JavaScript, Python, Java, and C, HTML does not serve a functional purpose. Its primary function is to provide content for browsers to display. In other words, HTML has a structural purpose, not a functional one.

However, some developers argue that this makes HTML a declarative programming language. According to Professor David Brailsford from the University of Nottingham, declarative languages may be more limited, but that does not diminish their status as a programming language.

Keeping this in mind, we can see why HTML is such an essential skill to have.

HTML is primarily used for creating web pages, allowing you to add headings, paragraphs, lists, and other elements. You can also incorporate images, videos, audio files, and other multimedia, as well as link to other pages within the same website or from external sites.

But HTML has even more potential beyond web pages. It can also be used to create tables, forms, and email templates. Whether you want to build a website, organize data, collect user information, process transactions, make reservations, or send emails, having a solid understanding of HTML is crucial.

How to Write HTML

Compared to other coding languages, HTML is relatively easy to read and understand. It consists of plain English text with some additional symbols here and there.

An HTML element serves as the basic building block of a web page, providing instructions to the browser on how to display content for the viewer. Elements can range from simple text like a paragraph to interactive items like buttons or sections of the page such as headers and footers. For example, a basic element in HTML would look like this:

<p>This is a paragraph</p>

To create more complex web pages, you'll need a basic understanding of HTML. So, let's break down the process of writing HTML and help you develop your coding skills!

The element is a crucial tool in HTML that allows users to interact with a website by clicking on it.

Now, let's delve into each component that makes up an HTML element.

HTML Tags

HTML elements are identified by tags, consisting of an opening tag and a closing tag, with the element name enclosed by angle brackets (<>). The closing tag is similar to the opening tag, except it has a slash (/) before the element name.

Tags contain the content of an element, which can include text, media, or other elements. For instance, to add a paragraph to your webpage with the text "This is a paragraph," you simply need to wrap it in

and

tags, like this:

This is a paragraph.

It's as simple as that. These three components are all you need to create a paragraph element in HTML.

While most HTML elements have an opening and closing tag, some are known as empty elements, which only require an opening tag.

The line break element is a common empty element. To add a line break in HTML, simply use
and it will create a line break.

Lastly, it's important to note that element names are not case-sensitive and can be written in uppercase or lowercase. However, lowercase is generally the preferred convention.

HTML Attributes

Not all HTML elements require attributes, but some do. Attributes are text within the opening tag that provide additional information about the element.

Attributes are always found in the opening tag and follow the syntax of name="value," although some attributes only require the name without a value.

Certain elements have mandatory attributes, such as the image element ( ), which requires a source attribute ( ) to specify the image's URL or file path. Without this attribute, the image will not be rendered by the browser.

Other elements have optional attributes that are considered good practice. For example, the element can also include the attribute, which provides alternative text for the image. While not essential, it is recommended to include this attribute to aid readers with low vision.

Attributes can be written in any order within the opening tag, but multiple instances of the same attribute are not allowed.

How to Use HTML

To start using HTML, you'll need a text editor. This is a software program used for writing code. Any basic text editor can be used since HTML files are in standard text format.

The first step is to download a free text editor, such as Notepad++ for Windows or Sublime Text for Mac. Once downloaded, install the program and open it.

Upon opening the text editor, you will see an editor window where you can write HTML code. Copy and paste the following code into the window:

We will explain each of these elements in the next section.

Next, save the file as "index.html" and store it in a folder on your computer.

Once the HTML file is saved, you can open it in your web browser by double-clicking on it or using the "open" option. Your browser will display the content like this:

How to Create an HTML File

The first step to building a website with HTML is creating an HTML file. This file will contain all the necessary HTML for your webpage and can be uploaded to your web server. When someone searches for your website, your server will send the HTML file to their browser and the page will be displayed. In the previous section, we created a basic HTML file to open in your browser. Now, we will guide you through the process of building a more complex one.

Step 1: Add a <!DOCTYPE> declaration.

First, we need to declare the type of document as HTML. This is done by adding the code on the first line of the file. Every HTML file begins this way.

Step 2: Add an <html> element.

Next, we will add the element after the doctype declaration. This is also known as the "root" element because it contains all other elements in the document. The opening tag is placed on the line below the doctype declaration, and the closing tag is added below. All other elements in the document will be enclosed within these tags.

Step 3: Add a language attribute.

Inside the opening tag, we will also add a (language) attribute. This helps screen readers identify the language of the document, making it more accessible for all users.

Step 4: Add a head and body section.

An HTML document is divided into two parts: the head section and the body section. The head section contains meta-information and internal CSS, which is not visible to users. The body section contains all the content that will appear on the front end, such as text, images, and links. To create these sections, we use and tags inside the section of the document. It is common practice to indent these tags for better readability, although it is not necessary for the browser to render the document correctly.

Step 5: Add a title in the head section.

In the head section, we can name our document by wrapping a title in tags. This can help users identify your webpage when they have multiple tabs open. It is also good practice to indent this element to show that it is nested within the section.

Step 6: Add HTML elements in the body section.

Now, let's add a heading and paragraph to the body section. The heading content should be wrapped in tags, while the paragraph content should be wrapped in tags. This gives us a basic HTML file that will load in our browser.

Below is how it would look on the front end once rendered:

My First Heading

My first paragraph.

Introduction to HTML Elements and Tags

HTML is a crucial language for creating web pages. It uses elements and tags to structure and display content on the front end. Let's take a closer look at the most commonly used elements and their tags.

Common HTML Elements

The first version of HTML only had 18 elements, but newer versions have introduced many more. However, for most tasks, you will only need a handful of them. Here are the most commonly used elements and their tags:

• Paragraph (<p>)
• Headings (<h1> - <h6>)
• Unordered List (<ul>)
• Anchor (<a>)
• Horizontal Rule (<hr>)

The Paragraph Element (<p>)

The paragraph element is used to represent a paragraph of text on a web page.

Heading Elements (<h1> - <h6>)

Heading elements are used to define different levels of section headings. The <h1> is the highest level and most prominent, while the <h6> is the lowest and least noticeable. See an example of headings below.

Unordered List Element (<ul>)

The unordered list element is used to group items when their order is not important. For instance, shopping lists do not need to follow a specific order. Each list item is defined using the <li> tag and wrapped within the <ul> element. See an example of an unordered list below and try adding your own items to see how the list changes.

• Item 1
• Item 2
• Item 3

The Anchor Element (<a>)

The anchor element is used to create links on a web page. It is a crucial element for adding interactivity and navigation to a website. The "href" attribute within the anchor tag contains the destination of the link and must be included for the link to work properly.

Horizontal Rule Element (<hr>)

The horizontal rule element creates a line across a web page. It is commonly used to indicate a change in theme, scene, or section within a page. Understanding the basics of HTML is essential for creating and designing your own web page.

The Importance of Learning HTML for Marketers

HTML is the backbone of web development and plays a crucial role in creating and maintaining websites. While HTML structures and organizes content, CSS is used for adding style and design. For marketers, having a basic understanding of HTML allows for making quick changes to websites and landing pages without relying on a developer.

Getting Started with HTML

If you're new to coding, there are resources available to help you learn HTML. The Beginner's Guide to HTML and CSS for Marketers is a free e-book designed specifically for beginners. It covers the basics of HTML and CSS and is perfect for marketers who need to make quick changes to their websites and landing pages. Additionally, platforms like LinkedIn Learning offer video tutorials for visual learners.

Wrapping Up

HTML is a crucial skill for anyone involved in web development or marketing. With a basic understanding of HTML, marketers can make changes to websites without relying on a developer, saving both time and money for businesses. Start learning HTML today and take the first step towards creating and designing your own web page.

HTML is constantly evolving, and knowing the basics is the first step towards creating and designing your own web page. The horizontal rule element is an essential part of HTML, creating a line across a page to indicate a change in theme or section. Start exploring the world of HTML and unleash your creativity.