What is HTML?
Tags and ElementsBefore 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
<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:
- 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.
- Next the
<html>tag should be included, so the browser knows where the HTML starts. Don't forget the closing tag for that.
- Following the
<html>tag, include 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.
- 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.
AttributesSometimes 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.
<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.
<p class="marvel">Iron Man</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 TagsIt'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:
- Iron Man
- Captain America
- Justice League
- Teenage Mutant Ninja Turtles
<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: 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 ElementsDifferent 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>. 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 TagsHere 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
<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
<h1>, Header Two
<h2>etc. They display in size order in the browser. Like this: 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: