Introduction to HTML

In this lesson, we will learn about the fundamental code behind every website; HTML.

HTML is an abbreviation for HyperText Markup Language. In computing, the term “markup” refers to the addition of additional data inside the text to order to provide additional information about that content. HTML is the standard markup language for creating Web pages.

It describes the structure of a Web page when writing HTML, we tell the browser which portions of the page should be shown, which sections should be used for navigation, and even which parts should be used as titles and which parts should be content.

What are HTML tags, and how do they work?

Tags are one of the most essential components of HTML. HTML is simply plain text that has been enhanced with additional information. Tags are used to provide this additional information to the user.

The following is an example of an HTML tag:

<h1>

The tag is defined by whatever is included within the “< “and”>” characters.

However, you can’t insert just anything into a tag. Web browsers are limited in their understanding of tags. They essentially have a library of tags that they can recognize. Unless you utilize the tags that have been formally specified as part of HTML, your tags will not function correctly.

Most tags come in pairs. These are considered closed tags because, in order to function properly, you need both an opener and a closing tag. See the example below:

<span></span>

Don’t worry about what “span” means. We will cover that later. For now, just pay attention to the brackets and slash. The first set of brackets denotes the starting tag, while the second set of brackets (the set that contains a slash towards the front) denotes a closing tag. You can insert the content between the tags. For instance:

<span>This is text content inside the span tag.</span>

Note: HTML is not case sensitive, however, if your starting tag is in a certain case, your closing tag must be in the same case. It’s best practice to write HTML in all lower case.

What are tags attributes?

Tags can contain characteristics in addition to being composed of text. Tag attributes are a set of characteristics that describe a tag or how it should behave. Unlike text content, which goes in between the two sets of brackets, attributes are placed inside the first set of brackets. And they never render on the page. Think of them as instructions for the tag that the browser reads, but the reader doesn’t.

Attributes contain a declaration followed by an equal sign and a set of quotes. The value of the attribute is placed inside the quotes.

Let’s add an attribute to our example from before. We will add a class attribute and give it a value of “primary.” Don’t worry about what class means for now. Just know that this is what an attribute looks like.

<span class="redtext">This is text content inside the span tag.</span>

There are many attributes that can be added to a tag. Tags do not accept all attributes, they only accept a certain set of attributes that each tag understands.

Self Closing Tags

There are a few but important tags that do not need closing tags. These are called self-closing tags. The contents of these tags are typically only in the form of attributes, not text content. This is why they do not require a closing tag. Closing tags look similar to regular tags, but they have a slash at the end.

Below is an example of a self-closing tag.

<meta/>

Some typical self-closing tags include: 

• <image/> 
• <link/>
• <br/>
• <meta/>
• <br/>

We will discuss what these tags mean later in this module.

What is an HTML document?

HTML is written in an HTML Document. An HTML document is a document that contains HTML code. There’s nothing unique about it other than that. With a writing tool such as Notepad or even Microsoft Word, all we have to do is copy and paste our HTML into a document to create an HTML document.

---

Creating your first HTML document

Professional HTML editors may be used to design and modify web pages. However, for learning HTML, we suggest using a basic text editor such as Notepad (Windows) or TextEdit (Mac) (Mac). To make your first web page using Notepad or TextEdit, follow the instructions below.

Step 1: Open your editor

Open your text editor. For windows, open Notepad by clicking the start screen (the window symbol at the bottom left on your screen) and type “note pad”.

On a Mac, navigate to the top right corner of the screen and click on the magnifying glass, then search for “text edit.” Then under “Open and Save”, check the box that says “Display HTML files as HTML code instead of formatted text”.

Step 2: Write HTML

The next step is to actually type something into the editor, we are going to use a very basic HTML example. Try wiring the code below line-by-line into your text editor.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Step 3: Save the file

Next, we are going o save the file. Name the file “index.html” and set the encoding to UTF-8 (which is the preferred encoding for HTML files)

Step 4: Open the file on a browser

Finally, we are going to look at the end result of our hard work. Go to wherever you saved the file and double-click it to open it. You may also right-click it and select to open it with the browser of your choice. and Voila! You have your very first HTML document. It’s essentially your own website, it’s a little bare, but this is essentially what all websites are. HTML documents that open in a browser.

---

Nested HTML Elements

HTML tags can be nested inside of others. Not all elements can live inside another, but after some practice, you will quickly learn which elements play well together and which do not.

Nested elements can make an HTML document difficult to read. This is why it’s always best practice to indent your nested elements with one tab. Below is the same example from before with properly indentations.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
 </body>
</html>

Basic HTML Tags

There are many tags out there, and you might feel overwhelmed but the good news is that you will only ever use about 10% of the total available tags—if that. Below are the most common tags you might run into.

<h1> heading </h1>	The main heading, Typpclly used for the page title
<h2>subheading </h2>	Another heading, typiccly used for subheadings
<p> paragraph </p>	Dentes text in a paragraph form
<b> bold </b>	Make text bold
<i>italic </i>	Make text italic
<a href=”url“>link name</a>	Create a link to another page or website
<div></div>	Divider that groups sections of code
<img src=”filename.jpg“>	Used to insert an image.
<ul></ul>	Unordered lists/bullet-point list (requires <li> (list items) inside)
<br/>	Line Break (force a new line)
<meta/>	Adds meta data to the page
<link/>	Locates resources like CSS and Javascript file locations

Conclusion

That’s all for now. In this lesson, we showed you just the basics of HTML. But There’s a lot more to it than that, a lot more. But, we want to keep this as light as possible, after all, this module is about Web design, not HTML.

Our next lesson dives into the arguably more fun part of web design and development; CSS.

Introduction

Lesson One: Create a Blogs@Baruch site

Lesson Two: Introduction to HTML

Lesson Three: Introduction of CSS

Lesson Four: Introduction to UX/UI

Lesson Five: Wire-framing

Lesson Six: Typography