< Return to Blog Page

Beginner’s Guide to HTML

by | Jun 2, 2021 | Development

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.

Image displaying basic html structure

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.

Image displaying html for page titles
Image displaying how a page title appears in browser

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.

Image displaying html for paragraphs
Image displaying how a paragraph appears in browser

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.

Image displaying html for headings
Image displaying how headings appear in browser

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.

Image displaying html for unordered lists
Image displaying how an unordered list appears in browser

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.

Image displaying html for ordered lists
Image displaying how an ordered list appears in browser

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.

Image displaying html for paragraph without a line break
Image displaying how a paragraph without a line break appears in browser

Example 2.

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

Image displaying html for paragraph with line break
Image displaying how a paragraph with a line break appears in browser

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.

Image displaying html for comments
Image displaying how comments appear in browser

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.

More Blogs

Meet The WynHouse Team

Meet The WynHouse Team

Evan Marsh Founder “When it comes to leadership, Evan raises the bar further than what I thought was possible. Always offering his time to his team and clients, he is wholly dedicated to the growth and success of WynHouse Software. Evan is continuously going above and...