Learn The Basics of HTML

HTML stands for HyperText Markup Language and is the code that structures content on a website. For example, HTML can structure web content as paragraphs, data tables, images and bullet points. This quick overview will give you a basic understanding of HTML and can help prepare you for an HTML bootcamp. 

Defining HTML

It’s important to note that HTML is not a programming language. Rather, it is a markup language. As a markup language, HTML outlines the structure for content and uses various elements that wrap or enclose portions of content, with the goal of having it act or appear the way you want it to. Tags can do things such as add hyperlinks, change font size and italicize words, among other functions. 

Web Browsers and HTML

Understanding the relationship between a web browser and HTML is a key component of any HTML bootcamp. The purpose of the browser is to read the HTML documents before displaying them. The browser will not show HTML tags; instead, it will use them to figure out how to display the content. 

Exploring HTML Elements

When you take an HTML class, you will notice that there are several key parts of an HTML element: the opening and closing tags and the content. 

The opening tag includes the element’s name with angle brackets for opening and closing. This lets you know where the element begins. The closing tag has a forward slash before the name of the element but is otherwise identical to the opening tag. The closing tag signals the end of the element for you and other developers working on the code. If it is forgotten, the resulting display can be odd. The content refers to the text or content within the element between the opening and closing tags. 

Take the following example:

In this example, the opening tag is <p>, the closing tag is </p> and the content is “This is a paragraph.” The entire thing is the element. 

Attributes

HTML elements may also include attributes. An attribute provides additional information that will not show up in the actual content. One example would be:

In this example, the attribute name is “class” with the attribute value as “editor-note.” The attribute “class” allows you as a developer to include an identifier that you can later use for targeting the element with notes like style information. 

There are some important requirements for attributes that you will learn in any HTML class. For instance, there must be a space between the attribute and the name of the element or a space between an attribute and the previous attribute. The structure of the attribute must include the attribute name followed by an equal sign. The value must be added and wrapped within quotation marks. 

Nesting Elements With HTML

It’s also possible to place one HTML element within another, a process referred to as nesting. If for some reason you want to emphasize a word in the above example, you could write:

When nesting elements, pay attention to proper ordering. In other words, you must close the nested elements before closing the larger ones. In the above example, you have to ensure you close the <strong> element before the <p> because it was opened after. Elements cannot overlap, as your browser will be unsure about what to do with the HTML, leading to undesirable results for both the developer and the user. 

Empty HTML Elements

HTML elements that do not have any content are called empty elements. One example would be an image element, like:

You will notice two different attributes in this example (src and alt) but no inner content. The lack of inner content is due to the fact that image elements do not wrap content; instead, they simply embed an image at the desired location. 

Looking at an HTML Document

To help you put all of the individual HTML elements to good use and understand how they work together, consider an HTML document that includes the above elements and methods. 

Take a look at this example to get a visual understanding of how HTML documents are set up:

We will go through this example element by element to explain it all.

The <!DOCTYPE html> at the beginning is a way to link to rules for HTML pages. This is a leftover requirement from the early days of HTML, and you still need to include it. 

The <html></html> element is called the root element. It wraps the content within the full page. The <head></head> is the head element. It is where you hold the information that is not going to be shown to website viewers but is on the HTML page. Examples include CSS for styling, character set declarations, page descriptions and keywords. 

The <meta charset=”utf-8″> establishes the character set for the HTML document as UTF-8. That particular set includes most characters from most written languages. This element ensures the HTML will be able to properly interpret the text you input. Including this element will help you avoid later issues. 

The title element (<title></title>) sets your page’s title. It is what will appear in the tab when the page loads as well as in bookmarks. The body element (<body></body>) is where all of the webpage content goes, including text, games, audio, images and more. 

Using HTML Elements to Mark Up Text

Although we have already explored some of the HTML elements you’ll come across as you learn web development, it’s important to become more familiar with the most common elements to help you with your HTML class. We cover the most important HTML elements below. 

Headings

The heading elements let you indicate headings and subheadings in your text. There are six heading levels within HTML, ranging from <h1> to <h6>. So, you would use:

For the main title on your page. Then headings would have <h2></h2>, and subheadings would have <h3></h3>. This continues with as many heading levels as you need, going up to <h6>. However, it is rare to use more than three or four of these heading levels. Remember that you can reuse each heading level as many times as you want within a document. So, if your web page has chapters, you could have:

And so on. 

Paragraphs

You already saw the paragraph element in action in the original example above. It appears as the <p> element. 

Lists

Your HTML bootcamp will cover several types of lists. These can be ordered or unordered. In either case, you will need a minimum of two elements in your HTML for lists. 

Unordered lists use the <ul> element and are lists where the order of your items does not make a difference. An example would be a shopping list. Ordered lists are something like a recipe where order does matter. They use the <ol> element. Within each list, every item uses the list item element, <li>. 

So, if you wanted to include a list with instructions, it would look like:

You can add HTML buttons to your webpage with the button element,

Centering

The <center> tag allows you to center content within a table cell or the entire page. 

Line Breaks

There is also a line break tag within HTML. These are empty elements as you just use <br /> without any opening or closing tag. When you enter the line break element, the following content will begin on the next line. Make sure that you include the space between the “br” and the slash. Otherwise, older browsers may not be able to render the line break. It’s also crucial to include the slash since this will not work with XHTML. 

Horizontal Lines

HTML even accounts for inserting horizontal lines as a way to break up a document. The <hr /> tag creates a line starting at the current position, traveling to the right margin where the line breaks. This is also an empty element. 

Preserve Formatting

You can use the <pre></pre> tags to preserve formatting in an HTML document. 

Including Images in HTML

To better understand adding images to a webpage before your HTML class, take a closer look at the same image example presented above:

This code will embed an image onto the website in the position that the code itself appears. Within the code, the src attribute stands for the source, and it includes the path to access the image file. 

The alt refers to the alternative attribute. This is where you can include descriptive text designed for users who are unable to see your image. This image description within the HTML is very useful for those with visual impairments who use screen readers that will read the alt text out loud. It can also provide additional information if the image does not load properly. If that happens, instead of the image appearing, the alt text will also help viewers get an idea of what was supposed to be in its place. The alt text in the example of “My test image” is not an ideal alt text. You should include something more descriptive. 

Including Links in HTML

You will also discover how to add links to text in your HTML bootcamp. The element <a> is used to create links. In this case, the “a” stands for “anchor.” You wrap your chosen text for the link in the <a> element. For example:

You then add an href attribute and fill the value with the corresponding URL address. The href attribute stands for “hypertext reference.” This looks like:

Make sure that you include the http:// or https:// or other protocol in the web address. Otherwise, you may not get your intended results. You can confirm that your link functions properly by clicking it.

Conclusion

If the above information about HTML piqued your interest, consider continuing your learning via an HTML bootcamp. A coding bootcamp can help you gain a firm grasp of the basics of HTML and lead the way to more advanced markups. It will also give you the foundational knowledge you need to build on your HTML skills such as adding style with CSS.

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.