<h1>Hi, this is my website.</h1>
This is the most basic example of an HTML element. There is a opening tag (
<h1>), some content in
the middle, and a matching closing tag (
</h1>). Almost all HTML elements are written this way.
Although not technically correct, the terms tag and element are often used interchangeably. Sometimes, you’ll see this whole thing referred to as an “H1 tag”. Try not to get caught up in the semantics.
<h1>Hi, this is my website.</h1> <p>Something really interesting about myself.</p>
Here, we have an H1 element and a P element. H1 stands for “heading level 1” and P stands for “paragraph”. A lot of the time, the tag abbreviations make total sense, although sometimes they don’t at all.
<p>My favorite things to eat, <em>by a wide margin</em>, are tacos.</p> <p>In my spare time, I sometimes play golf and... <strong>eat tacos</strong>.</p>
Elements are either “block” or “inline”. Block-level elements begin a new line and stack on top of each other. Inline elements do not. Here, each P element will begin on its own line, whereas the strong and em elements will not.
strong = bold and
em = italicized. Who knew?
<ul> <li>Tacos</li> <li>Bacon</li> <li>Pizza</li> <li>Fried Chicken</li> </ul>
Elements may be nested. Here, we have a bulleted list. The UL (unordered list) element represents the entire list, and each LI (list item) element represents each item in the list.
<a href="http://google.com/">You can find anything on the Internet</a>
Some tags have attributes. Attributes are data that goes along with the tag. For example, here we’re using the A element to build a link. It wouldn’t make much sense to have an A tag without some information on where the link should lead when clicked, so we need the href attribute in order to do that.
Remember the part where almost all elements have an opening and closing? Here’s one of the
rare examples of an element that doesn’t have a closing. These are known as “self-closing elements”.
This is how you put an image on the page. The
src attribute tells us everything we need to know
about this tag, so we don’t need any inner content or a closing. Some other common self-closing elements
And yes, we can nest the IMG element within the A element to create a clickable image.
<a href="http://google.com/"><img src="cat.jpg"></a>
Now that we've been introduced to some basic HTML, it's time to examine the anatomy of a complete web page. Now, don't let the fancy terminology trip you up – a "web page" is simply a text file that lives on a hard drive somewhere. The only real requirements for turning a plain mild-mannered text file into a web page are:
<body>elements, and this weird
<!doctype>thing at the very top.
<html> <head> <title>This web page is pretty boring.</title> </head> <body> <h1>Zzzzzz</h1> </body> </html>
Yeah, pretty much the most boring valid HTML web page ever, right? But it's valid HTML that will be read and interpreted by any web browser, anywhere.
A web site is a collection of one or more web pages. No, really, that's about it.
Alright, for the sake of discussing it some more, consider this group of files, sitting on a computer somewhere:
index.html products.html about-us.html contact.html
If this computer were accessible from the Internet somehow, you could slap a domain name on it (more about that later), and it'd be just like many of the publicly available web sites you might visit today. There are a couple more basic rules at work here:
products.htmlis NOT the same as
Products.html– be careful with this one. For consistency's sake, I always use lowercase letters, although it's a matter of personal preference.