As we know HTML is an important part of the web. And while some web designers create pages by typing HTML themselves, it’s easy to learn a little about it. If you’re a beginner, let us walk you through 5 steps to understanding basic HTML code. HTML is the backbone of every webpage.
We’ll look at some of the basics of the language, including what HTML is, some basic concepts, and how it interacts with other languages.
5 Steps to Understanding Basic HTML Code
HTML stands for Hypertext Markup Language. And while it is sometimes associated with programming languages, it is not accurate.
As a markup language, HTML only allows you to create the display layout of pages. A real programming language, such as Java or C++, involves arguments and commands.
Although it sounds simple, HTML is the basis of every page on the web. Which is responsible for highlighting text, adding images, and linking to other pages. We have an HTML FAQ that explains more.
You can right-click on most webpages in your browser and select View Page Source or similar to see the HTML behind them. There may be a lot of code that isn’t HTML, but you can find it.
Even if you have no experience with markup or programming languages, learning a little about HTML will make you a more knowledgeable web user. Let’s take a look at five basic steps to help you understand how HTML works. We’ll give examples along the way.
Step 1: Understanding the Concept of Tags
Most tags come in pairs to wrap the affected text within themselves. Here’s a simple example (<strong> tag highlights text; we’ll discuss this in a moment.)
Note how the closing tag begins with a forward slash (/). This shows the closing tag, which is important. If you don’t close the tag, everything will have that attribute from the beginning.
However, not all tags have a pair. Some HTML elements, called empty elements, have no content and exist by themselves. An example is a tag, which is a line break. You can “close” such tags by adding a slash (like <br /> ), but it’s not strictly necessary.
Step 2: The Skeleton HTML Layout
Certain tags must be defined in order to properly lay out a proper HTML document. Here are the required parts:
Every HTML document must start with <!DOCTYPE html> to declare itself. Thus, its closing tag, </html>, is the last item in an HTML file.
Next, the <head> section contains information about the title of the page, various scripts running on the page, etc. As the name suggests, it usually comes after the opening <html> tag. The end user does not see much content in this tag.
Finally, the <body> tag holds the text (and more) of the page the reader is viewing. Here you will find images, links, and more.
The <body> section makes up the bulk of an HTML document, the rest of our tutorial will look at its related elements.
Step 3: Basic HTML tags for formatting
Next, let’s look at some of the common tags that make up an HTML document. Yaa, it’s not possible to cover every point, so we’ll review some of the most imp factors. If this doesn’t satisfy you, we’ve included several more HTML examples.
If these tags seem too basic, remember that HTML was created in 1993. At that time the web was very text-based.
Simple text formatting
HTML supports the basic text styles you find in Microsoft Word:
The <strong> tag highlights text.
The <em> tag (which means “weight”) will italicize the text.
HTML also supports the old <b> tags for bold and <i> italics. However, it is better to use the above.
In short, <strong> and <em> show how something should be interpreted, while the latter tags just tell us how it should look. These earlier tags are more accessible to screen readers used by the visually impaired.
Paragraph and Other Divisions
HTML’s <div> tag lets you define a section of a document. Typically, this is combined with CSS (see below) to format a section in a certain way.
The <p> tag lets you break text into paragraphs. Browsers will automatically put some space before and after this, so you can break up the text naturally.
You can add headings to your document and make them easy to follow using the <h1> to <h6> tags. H1 is the most important heading, while H6 is the most important. Almost every MakeUseOf article uses H2 and H3 headers to organize information.
Pressing Enter to add line breaks to your HTML document will not actually display them. Instead, you can use it to add line breaks.
Here’s an example that uses all of these:
<div class=”example”>
<h2>Example title</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph 2.</p>
</div>
Step 4:
Images are an important part of most web pages. You can easily combine them with HTML and even set individual properties for them.
You insert an image using the <img> tag. Mix it up
The “src” attribute lets you specify where to load the image from.
Another important attribute of <img> tags is alt. Alt text allows you to describe an image for screen readers or if the image doesn’t load properly. You can mouse over the image to see the alternative text.
Use the Width and Height elements to specify in which pixels the image should appear.
Put it all together and the image tag will look like this:
<img src=”https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg” alt=”Dr. Phil” width=”1280″ height=”720″>
Step 5: Adding Links
The World Wide Web wouldn’t be much of a Web without links to other pages. Using the <a> tag, you can add links to other pages on any text.
Inside the <a> tag, the href attribute tells you where you’re linking to. Just pasting the URL will work. You can use the title element to add a bit of text that will appear when someone hovers over the link.
A basic link looks like this:
<a href=”https://www.google.com/” title=”Click here to search the web”>Visit Google</a>
The <a> tag has many other possible elements, but we won’t discuss them here.
A little knowledge goes a long way
We’ve taken know of how an HTML document works. Now you know the basics of how web pages are designed. Even if you don’t build webpages, you probably know a little bit about the web that you use every day.
To learn more, upgrade your web development skills with essential tools, and check out our other learnable posts for better learning.
