featured02

What is HTML?

‌‌
If you're like most people, you probably know that your browser is used for surfing the web, but you may not have a clue about how it works. The backbone of all pages that you view in a browser is HTML, which stands for Hyper Text Markup Language, and it's essential in web design and development. Everything you see in your browser, at its core, is created with HTML. You might also hear HTML referred to as "markup". HTML is written with "codes" that can be read by a person, without needing to be compiled, which is why it's called "markup". The text on a web page is “marked up” with these "codes" to let the browser know what text to display. Essentially, HTML is a set of pre-defined tags that tell a browser what content to display and how to display it. HTML is actually a fairly easy language to use and learn. It's just a matter of learning all the tags available for your use and getting a little bit more familiar with them.

Tags and Elements

Before we dive in to learning HTML, it's important to understand tags and elements. A tag is a specific instruction to tell the browser how to display certain content on the screen. Sometimes you might hear tags are referred to as elements, especially since web developers often use them interchangeably, but they're technically not the same thing. Tags are made with less than or greater symbols. The > and < are often referred to as "brackets" or "angle brackets." This is an example of a paragraph tag: <p> An element is made up of two tags, an opening tag and closing tag, as well as the content you want the browser to display. This is an example of a paragraph element: <p>Hello World!</p> The browser knows to create a paragraph element because of the paragraph tag <p>. Also, notice that the tag after "Hello World!" has a back slash. The backslash indicates that is a closing tag. The first <p> without the backslash is considered an opening tag. Once an opening tag is used, a closing tag needs to be included so that the browser knows the element has been closed. It's always a good idea to make your closing tag immediately after you've written the opening tag, and then add your text in between them. So if we write <p>Hello World!</p> in our text file and then open it in the browser, the browser will look something like this:

Getting Started

The first step in writing  HTML is to choose a text editor.  A couple free options for Mac and Windows are Sublime Text and Brackets. To start actually writing HTML, you'll just need to add some HTML elements to a blank text file. Then it will display in the browser. Pretty simple, right? A best practice is to first create a folder with the name of your site, and then add your HTML files in the folder. That folder is where you'll eventually store your images and other files like JavaScript and CSS. After you create a new file in whatever text editor you choose, save the file with the extension .html so that the browser knows it's HTML. There are four necessary elements that must be included in every HTML document: the main declaration, the HTML declaration, the head, and the body.
  1. It's important to add a main declaration at the top of any HTML document so that the browser knows which version of HTML you're using. The main declaration for HTML5, the newest form of HTML, is <!DOCTYPE html> and it should be included at the very top of the document. It's one of the few times you don't need a closing tag.
  2. Next the <html> tag should be included, so the browser knows where the HTML starts. Don't forget the closing tag for that.
  3. Following the <html> tag, include the <head> tag. The <head> includes things like the title of the page, the author and links to style sheets. Nothing created in the <head> will display on the page in the browser.
  4. The last necessary element is the <body>. It lets the browser know what to display on the page. There's only one body element per page. Everything within that element will be displayed in the browser.

Attributes

Sometimes extra items need to be added to a tag. These are called attributes. They're additional values that can configure a tag or adjust the behavior of the tag. Adding an attribute may also not be necessary, since it'll depend on what you want the browser to know. Attributes are added to tags by writing the particular attribute followed by an equal sign. Then you put quotation marks and add the value of the attribute within the quotation marks. Attributes are only ever added to opening tags. Not every attribute is available for every tag. However, there are four global attributes that can be used for all tags.
  • id: The "id" attribute is mostly used in tandem with JavaScript and CSS. It doesn't change the tag, and must be unique on a given page. No two tags can have the same value in an id attribute on the same page. Here's an example on an id attribute: <p id="ironman">Iron Man</p>  There can only be one Iron Man, so that's why the id is "ironman". The id "ironman" will not be used with any other elements on the page.
  • class: The "class" attribute is most often used for CSS (Cascading Style Sheets) purposes, but it's also sometimes used for JavaScript. This value can be repeated multiple times on any given page. You might want to give  some paragraphs an attribute that would group them together in a specific class. Adding classes to tags makes it easier to style items to look a certain way later with CSS. This is what paragraph tags with a class attribute would look like: <p class="marvel">Iron Man</p> <p class="marvel">Thor</p>
  • style: The "style" attribute is used to create inline styles, like changing the color of the text. Using inline styles, however, is considered a poor practice and should be avoided if possible. Styling should be created with CSS in a separate style sheet. That way it's easier to make changes to all elements at once. For example, if you want both Iron Man and Thor to display as red in the browser, since they're both Marvel characters, you'd write this code using the inline style attribute: <p style="color:red">Iron Man</p> <p style="color:red">Thor</p> Maybe later you decide you want the color to be black instead. If you've used inline styles then you'd have to go back and edit every line where you've written "color:red" and change it to "color:black". If you had simply given both Iron Man and Thor the class attribute "marvel" you could tell your CSS to change everything in the class "marvel" to have black text with only one line of code. That's a little beyond the scope of this article, but we'll go into CSS more in depth in an upcoming article. You can also learn more about CSS in our "Your First Day with CSS" course.
  • title: The title attribute is used as an identifier or tool tip for the tag. When the user's mouse hovers over where a title has been set, the value of the title attribute is displayed to them.

Nested Tags

It's easiest to think of nesting - or nested tags - as tags that are contained within another tag. All that means is sometimes you need to put some elements inside another element, usually for organizational purposes. A simple way to think of this is with lists. There are two kinds of lists that the browser recognizes - ordered and unordered lists. An ordered list, by default, will display a numbered list. Like this:
  1. Iron Man
  2. Hulk
  3. Thor
  4. Captain America
You might want to make an unordered list if you've not too concerned about the order of the list items. An unordered list, by default, will display with bullet points like this:
  • Avengers
  • Justice League
  • Teenage Mutant Ninja Turtles
  • X-Men
To tell the browser you want to display a list, first you must tell it what kind of list you want by choosing <ul> for unordered or <ol> for ordered. Let's make the unordered superhero list by first telling the browser what kind of list to make: 
<ul></ul>
You'll notice that we begin by including both the opening and closing tags as mentioned before. Now we need to tell the browser the superheroes that are in that list. We add items to a list using the "list item" tag <li>. Here's what a completed unordered list looks like in HTML: 
<ul>

     <li>Avengers</li>
     <li>Justice League</li>
     <li>Teenage Mutant Ninja Turtle</li>
     <li>X-Men</li>

</ul>
As you can see, the list items are nested within the unordered list. Just like the unordered list attribute (<ul></ul>), you must also include an opening and closing tag for each listed item (<li></li>). We could even nest another list within this one. For example, we could include the previous ordered list of superheroes within their specific group like this: 
<ul>
     <li>Avengers
       <ol>
         <li>Iron Man</li>
         <li>Hulk</li>
         <li>Thor</li>
         <li>Captain America</li>
       </ol>
     </li>
     <li>Justice League</li>
     <li>Teenage Mutant Ninja Turtle</li>
     <li>X-Men</li>
</ul>
Here's what that would that HTML would look like in the browser: Example of nested superhero list   Making your closing tags as soon as you've created the opening one is more important with nested tags, since it can start to get confusing with all those tags everywhere. The ordered list that starts with "Iron Man" is the child of the "Avengers" list item element. In turn, the Avengers list item is the parent to the ordered list starting with "Iron Man." Parent and child elements are often mentioned when working with HTML, so it's definitely important to get a grasp on what they mean. It's important to remember that some tags can't be nested inside other elements. For example, a <div> (which is the tag for divider) can't be nested inside a <p>, but a <p> can be nested within a <div>. Here's an example: 
<div id="ironman">

      <p>Iron Man's real name is Tony Stark and he's in Marvel's Avengers</p>

</div>
 

Block Level Elements vs. Inline Elements

Different HTML elements display different ways by default in the browser. It can take a while for you to learn all the different attributes and whether every element is either inline or block. Don't let that stop you from getting started, though. W3 is a great resource where you can search for individual elements. There are also tons of other free resources that you can use to quickly look up an element and learn everything about it. A block level element takes up the entire width of their parent container. So unless you've nested some elements, that will be the width of the browser. An example of a block element is <p>. An inline element will only take up the current space where it exists. So you can place two inline elements after each other in your HTML, and they could display next to each other since they only take the necessary width for the content that they hold. An example of an inline element is <span>.   Illustration to show the difference between inline and block elements   Even though "I" "love" "superheroes" is written separately and on separate lines, the first example still puts them next to each other since a <span> is an inline item. Since a <p> is a block item, each separate element takes up the entire width of the browser.

Common Tags

Here are a few tags that are used to separate text with no styles associated with them:
  • <span>  The span tag creates an inline element
  • <p> The paragraph tag creates a block level element
  • <div>  This is the divider tag and it's simply a generic block container
There are few tags that do not need a closing tag:
  • <br> This is a break tag. It's helpful when you want to have your paragraph text start on another line. It doesn't alter the text at all, just tells it to go to the next line.
  • <hr> Is a block level element that creates a horizontal rule across the page. Just like <br>, you'd just need to add it where you want to make a line
There are six header tags that are useful for when you need a heading over a certain section of content. They are referred to as Header One <h1>, Header Two <h2> etc. They display in size order in the browser. Like this: Illustration to show different header sizes Now that you've learned about tags, element and attributes, you're in a pretty great place to start learning to write your own HTML for your own pages. If you'd like start learning more about HTML and web design, check out some of our Web Getting Started Tutorials. If you'd like to learn more terms about web design and what they mean, we've compiled a PDF of common terms you'll come across in the world of web design: