Writing HTML
In the Part 1 of this tutorial, I went briefly into what HTML and CSS is and some of the things you’ll need to help get you started in creating your own webpages. Now, I’ll explain in greater detail how HTML is used to structure your very first webpage. You won’t need to type anything into your text editor just yet. I’ll first explain what a specific HTML code will be and then I’ll show you how you can display it on an actual web browser. Then, after I’ve finished explaining how to write HTML, we’ll go ahead and start typing in our text editors and start creating our first webpage.
HTML elements and tags
So what is HTML comprised of you might ask? HTML is made up of things called HTML elements. HTML elements define the structure and content of the page and most commonly consist of HTML tags; an opening tag and a closing tag. The most common types of elements you will see are:
<div>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<p>,<a>,<span>,<strong>,<em>
and many, many more (Here’s a list of all HTML elements if you really want to see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
Block and Inline Elements
Before we go any further, I must first explain the characteristics of most of these elements. Almost all elements fall under two categories: Block and Inline elements. What’s the difference, you might ask?
The difference is that block-level elements create a new line and occupy the width of any space. Elements such as <div>, <h1> through <h6>, <p>, and many others are what are known as block-level elements. They stack on top of each other. <div>‘s, which we will use constantly, will help us identify large groupings to help structure our content and help us build the layout of our page.
Inline elements on the other hand don’t begin on a new line. They only occupy the width of the content between each tag. Elements such as <span>, <strong>, <em>, and many other inline-level elements line up next to each other and can be nested inside block-level elements or within other inline-elements, however, they should not be used to wrap block-level elements. Just remember this, inline-level elements can be nested inside of block-level elements, but not the other way around.
Enough with the intros, let’s get to some examples
Here’s an example of an h1 header element.
<h1>This is a header</h1>
You’ll notice that we included the “<” character followed by the “h1” and then a closing “>” symbol. This is called the opening tag.
Then we have the copy content in between our opening and closing tags which we had typed in: “This is a header”.
After that we have the “<” symbol, followed by a forward-slash character “/“, the “h1” header element name and another “>” symbol. This last part is called the closing tag. You’ll notice that the closing tag includes the “/” which designates that this tag is closing the entire “h1” header element.
Figure 1.1 illustrates a header element and a paragraph element to give you a bit of context.
Clik here to view.
Figure 1.1
Self-closing tags
Now that you have a basic understanding of HTML elements and tags, there are a few elements that don’t contain any content, and can therefore be self-closing tags. This just means that they don’t require a closing tag.
NOTE: These are sometimes referred to as void tags.
Before I explain, here’s a short list of the most common self-closing tags (there are many more than these, however):
<br />,<hr />,<img />,<input />
You’ll notice that each of these tags has the forward-slash “/” directly followed by a closing “>” symbol. These tags contain no content and can be used without having a separate closing tag all together. (In most cases, you can omit the forward slash (/) and it would still work). We’ll be writing more of these once we start creating our webpages later, to get you familiar with what all of these elements do, but for now I’m just going to explain what these elements are first.
While you can type out these elements themselves, they are meaningless without some attributes. In the next section I’ll talk about adding attributes to some of these elements to give them proper context.
Attributes
HTML elements may also contain attributes. What are attributes you might ask? Well, attributes provide extra information about an element and is tied with the first opening tag. The most commonly used attributes are:
id, class, title, src, href
There are many more attributes out there (and even some you can create yourself… but that’s a lot more advanced. More on that much, much later) but for now, we can just use the basic and widely used attributes.
Attributes are assigned to an element within the opening tag and is accompanied by a value. Here’s an example of a h1 header tag with an id of “awesome” and a paragraph tag with another id name. Id’s (pronounced “I.D.”) are used as an identifier for a specific element on that webpage (There should only be one id of the same name allowed on a single page).
<h1 id="awesome">This header is awesome!</h1> <p id="cool">This paragraph is pretty cool!</p>
Here’a another example of an attribute. This one is an anchor tag that uses the href attribute that points to a URL. Anchor tags are used to create a link to any url that you provide in its href attribute.
NOTE: Anchor tags always require the href attribute
See the example below:
<a href="http://www.hallofhavoc.com">Click this link to go to Hallofhavoc.com</a>
You’ll notice that the href attribute contains the http reference or URL destination for the anchor tag.
Now that you have a better understanding of how HTML elements and attributes work, we can go ahead and start creating our first webpage.
In the next tutorial, we’ll actually start writing HTML code and previewing our first web page.