Beginner's Guide to HTML

HTML can seem overwhelming at first. At WynHouse Software, we want to make complex topics make sense. That's why we made an easy-to-understand guide to HTML for beginners like you. Let's get started.

What is HTML?

Short for HyperText Markup Language, HTML is the standard markup language for structuring a webpage and its content. HTML is commonly assisted by Cascading Style Sheets (CSS) and JavaScript.

Each webpage has its own HTML. For example, if your website consists of a homepage, services page, blog page, and about page, your HTML files would look similar to the following:

• index.html (default)
• services.html
• blog.html
• about.html

HTML Basics

Tags

Tags are the starting and ending parts of an HTML element. They begin with the "<" symbol and end with the ">" symbol. Whenever there is something written inside "<" and ">", they are referred to as tags.

Example:

<tagname> </tagname>

Elements

An HTML element includes the tags, as well as what's getting visually displayed on the webpage. Generally, they consist of a start tag, content, and an end tag.

Example:

<tagname> Insert content here. </tagname>

Attributes

Attributes are used to provide additional information about HTML elements. They are always specified in the opening tag of an element and generally provide additional styling to the element.

Example:

<tagname align="center"> This is telling the element what to do. </tagname>

Structure of a Webpage

The following is the typical layout of HTML for your webpages. This continues to get more complex as you add more and more content to each page. Possible content could include headings, paragraphs, links, images, and more.

Page Titles

The title of your webpage is one of the most important pieces of metadata. This is the text browsers display in the tab for your page. This title is also what Google displays in their search engine results.

Paragraphs

Let's start adding some parts we can actually see on the webpage. The <p> element defines the content inside of it as a distinct paragraph.

Headings

Headings are like titles, but ones that are actually displayed on the webpages. Possible headings include <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. These headings are ranked by priority, <h1> being the most prominent and <h6> being the least.

Unordered Lists

Lists can make your website copy easier to read. To put words or phrases in an unordered list format, you wrap them with <ul> tags. Unordered lists show up like bullet points on your webpage.

Ordered Lists

What's the difference between unordered lists and ordered lists? While unordered lists appear like bullet points, ordered lists are denoted by numbers.

Line Breaks

Since HTML condenses several consecutive spaces and tabs, line breaks have a similar role to a return key. Line breaks are an example of HTML elements that do not follow the typical element structure, as they don't require content in between start and end tags.

Example 1.

Notice how the second paragraph appears without the <br/> element.

Example 2.

Now, notice how paragraph two appears with the addition of the <br/> element.

Comments

Comments are not displayed by the browser, but can help developers document their HTML source code. For example, developers can write notes to themselves or others in the code without having it show up on the webpage.

W3Schools

W3Schools is a great resource to use when getting the hang of HTML. Their website serves as a completely free reference for web developers, covering topics such as HTML, CSS, JavaScript, and more.

Try It Yourself Feature

Among W3School's features includes a helpful "try it yourself" tool. W3schools presents thousands of code examples across their site. By using this online editor, you can alter examples and execute code experimentally before implementing it. This helps you to determine what works and what doesn't, aiming to eliminate potential errors on your project. Try it out here!

Summary

HTML is a fundamental part of web development. This front-end development language sets the structure of a website's pages and works together with CSS and JavaScript to provide your final result.

Not confident that you can master this kind of project on your own? Consider the help of our software developers at WynHouse Software.