HTML Tutorial Library from Career Karma
Tags: html, codenewbie, webdev, tutorial
Published: 2020-08-13 19:52:54

In this Career Karma article roundup, we cover all of the best posts from the [Career Karma blog](https://careerkarma.com/blog/html?utm_source=Dev.to&utm_medium=Roundup&utm_campaign=September) 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](https://careerkarma.com/blog/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](https://www.cnbc.com/2019/10/07/dominos-supreme-court.html) over online accessibility.

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


### &lt;header>

The [header](https://careerkarma.com/blog/html-headers/) 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.


### &lt;main>, &lt;section>, &lt;h1> - &lt;h6>

The main, section, and heading (&lt;h1> - &lt;h6>) elements are semantic elements that describe the purpose of a block of markup text. &lt;main> is separate from the &lt;header> element we just looked at. It’s one of the three major components of the &lt;body> of an HTML Document (the other two being the header and [footer](https://careerkarma.com/blog/html-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](https://careerkarma.com/blog/semantic-html-symbols/), we focus more on these and other semantic tags.


### &lt;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](https://careerkarma.com/blog/html-div/) 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](https://careerkarma.com/blog/html-checkbox/), we describe how to get up and running using the checkbox and radio inputs for your [form](https://careerkarma.com/blog/html-forms/). To create [dropdowns](https://careerkarma.com/blog/html-dropdown/) for your form, use the &lt;select> element to describe the dropdown and then &lt;option> to add choices.


### &lt;ul>, &lt;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](https://careerkarma.com/blog/html-lists/).


### &lt;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](https://careerkarma.com/blog/html-anchor/) we’ll learn how to create a hypertext link using the anchor tag.


### &lt;img>

In this [article](https://careerkarma.com/blog/html-image/), we learn to add visual aesthetics to our web pages by adding &lt;img> tags. Sometimes, we might want to use images as [links](https://careerkarma.com/blog/html-image-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](https://careerkarma.com/blog/html-bold-italics-underline/) and tags that allow us to create sub- or superscript text [here](https://careerkarma.com/blog/html-superscript-subscript/).


## 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](https://careerkarma.com/blog/html-attributes/).



---


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 ](https://careerkarma.com/blog/learn-html/)on the Career Karma blog the next time you encounter a HTML problem!