In this Career Karma article roundup, we cover all of the best posts from the Career Karma blog on how to create the skeleton for our front end projects with Hypertext Markup Language (HTML) using industry best practices.

HTML is the equivalent to the frame of a house or the human skeletal system: it’s the foundation of a website’s creation. HTML is a markup language that describes the structure of a web page using elements that indicate its purpose.

This guide is a progressive tutorial that walks through how to get started with HTML. We feature links from some of our resources and interactive tutorials so you can get up to speed with HTML in no time.

HTML Tutorials from Career Karma

Semantic and Non-Semantic Tags

Semantic HTML allows our website to become more accessible for those with disabilities. It is important to be familiar with how to bring web accessibility to your website if it ever gets to a point where you need to create pages for a site that provides online services. Those types of sites might need to start to legally be accommodating to users under the Americans with Disabilities Act (ADA) as a result of the Supreme Court handing a win to a blind man who sued a major pizza chain over online accessibility.

The following walkthroughs and tutorials talk about semantic elements in HTML:

<header>

The header of an HTML document tells us information about the primary purpose of the page or section of a page. It is first introduced in HTML5 as part of the goal to make HTML more accessible. There can be multiple headers per page, but typically we have a page header and a header for each section of the page.

<main>, <section>, <h1> - <h6>

The main, section, and heading (<h1> - <h6>) elements are semantic elements that describe the purpose of a block of markup text. <main> is separate from the <header> element we just looked at. It’s one of the three major components of the <body> of an HTML Document (the other two being the header and footer). Section elements are located in the main element and divide the main web page into pertinent parts. The heading tags indicate the importance level of a section or subsection. In this article, we focus more on these and other semantic tags.

<div>

The div element is the most versatile of all the elements available to us in HTML. It’s generic by definition, which means it is not** **a semantic HTML element. Div is used when you are not able to reach for another element that better describes the purpose of your page. Here we describe more in-depth about what divs are and how they are used in your application.

forms

When we want users to make selections on forms, the best way to incorporate it into our page is by using HTML Input elements.

Inputs come in all kinds of flavors, but in this article, we describe how to get up and running using the checkbox and radio inputs for your form. To create dropdowns for your form, use the <select> element to describe the dropdown and then <option> to add choices.

<ul>, <ol>

Using lists on our webpage helps us create bullet points – unordered lists – or numbered lists – ordered lists – to help us to be more concise in our descriptions. Sometimes getting straight to the point helps consume information faster since we don’t skim a block of text. When you need to list salient points to be concise, use a list element. Learn more about that here.

<a>

The anchor tag is an important element in HTML. It’s what makes up the “HT”** **in HTML: hypertext is the type of text that directs you to other sections of a page or to a new page. Here we’ll learn how to create a hypertext link using the anchor tag.

<img>

In this article, we learn to add visual aesthetics to our web pages by adding <img> tags. Sometimes, we might want to use images as links to other pages as well.

Formatting Tags

In addition to the basic layout of the page, HTML can assist with the formatting of text so that it can be emphasized correctly for screen readers. These tags are defined or redefined in HTML5 as part of an effort to make the web more accessible to those who need it.

Learn more about tags that provide emphasis here and tags that allow us to create sub- or superscript text here.

Attributes

Attributes describe an HTML element even further by giving the element some meaning. For example, an anchor tag has an href attribute added to describe where you go next if you click on it. An img tag will have an src attribute to point to where the image is. All elements can have a style attribute that illustrates how the element should look on the web page. Read about these attributes and more in this article.

This is just the beginning! Our library of programming tutorials constantly expands to cover more topics and functions, so be sure to check the full beginner’s guide to learning HTML on the Career Karma blog the next time you encounter a HTML problem!

Blog

HTML Tutorial Library from Career Karma

Artur Meyster