Taking that first step in learning how to code can be overwhelming if you don’t know where to start. Know that’s a common feeling and you’re not alone! There are several different approaches to take to get into the tech industry: Mobile App Development, Data Science, and Software Engineering to name a few. Today, we are going to focus on that first step to take in Web Development: learning HTML -- HyperText Markup Language.
What is HTML?
Think of HTML as the framework of a house: it’s the basis of what we see when we visit a web page and interact with it. HTML is a markup language that describes the structure of a web page by using elements that indicate what its purpose is. This is called Semantic HTML. Describing pages in this way helps your markup become machine readable so that those with special needs can access the web too!
HTML Layout Tags
HTML’s primary responsibility is creating the skeleton of our web page. There are several basic tags that exist to assist us in that regard. Let’s talk about a few in depth:
The header of an HTML document tells us information about the primary purpose of the page or section of a page. It was introduced in HTML5 as part of the goal to make HTML more accessible to users who depend on screen readers or other assistive devices. 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 read about. It’s one of the three major components of the <body> of an HTML Document (the other two being <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.
The Div element is the most versatile of all the elements available to us in HTML. It’s generic by definition and can be used for many things. However, it is not a semantic HTML element, so it should only be 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 should be used in your application.
<input>, <form>, <select>
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 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.
Using lists on our webpage can help us create bullet points -- unordered lists (<ul>) -- or numbered lists -- ordered lists (<ol>) -- to help us to be more concise in our descriptions. Sometimes getting straight to the point helps to consume information faster since we’re not skimming a block of text. When you have a need to list salient points to be concise, use a list element.
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 all together! Here, we’ll learn how to create a hypertext link using the anchor tag.
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. Lastly, it’s a good idea to directly manipulate the height and width of an <img> so that it loads quicker because the first read-through of the document knows how big that image is going to be: learn how to do that here.
HTML Formatting Tags
In addition to the basic layout of the page, HTML can assist us with the formatting of text so that it can be emphasized correctly for screen readers. These tags were defined or redefined in HTML5 as part of an effort to make the web more accessible to those who need it.
<strong>, <em>, <u>
The <strong> tag in HTML indicates a level of importance to the contents that surrounds it. The <em> tag is used to add stress to a word or sentence, and the <u> tag is redefined in HTML5 to define underlined text so it can be styled using CSS. Learn more here.
In this article, we learn that we can use <sub> and <sup> tags to add formatting to citations or equations or pretty much anything that requires subscript or superscript text. These are inline elements that format our text to be slightly above or slightly below our main text.
Attributes describe an HTML element even further by giving the element some meaning. For example, an anchor tag will have an href attribute added to it to describe where you will go next if you clicked on it. An img tag will have a src attribute to point to where the image is. All elements can have a style tag that illustrates how the element should look on the web page. Read about these attributes and more in this article.
About the author:
Christina Kopecky is a writer at Career Karma where she focuses on coding tutorials and technical articles. (LinkedIn)