In this demo we'll walk you through the most commonly used HTML elements. We'll also show you some of the new HTML5 features that make writing HTML today more effective than it was with previous versions of HTML.

The project repo for this demo can be found here.

Once you have the repo cloned or forked you can fire up a local server in the project directory with $ ruby -run -e httpd . -p 3000 and then open it in your browser at http://localhost:3000. Click around the links and have a look around the code!

Setup and HTML Basics

When you open up the demo repo you'll notice that there is an index.html file. This is the file that the server will load by default when you navigate to the root route http://localhost:3000. It contains the navbar so we can navigate to other files in the demo. The first of these files we'll take a look at is basics.html.

If you open basics.html and navigate to the same page in your browser you'll see some examples of different types of HTML elements. Let's have a look at these.

Everyday HTML Elements

Semantic HTML Tags

Preformatted Text, HTML Entities and Meta Data

Lists

Now navigate to lists.html in your text editor and browser. Looking at what the browser renders and comparing that with the markup in lists.html you can see lists are straight foward and do pretty much exactly what you'd expect. One interesting feature of lists to note is that when you nest lists the browser will take care to assign different bullet styles to the various levels of nested lists.

Forms

Forms are a fairly broad topic that will be built upon as you dive deeper into their connection with client and server-side data. However, the markup for them is simple to get started with. There are a bunch of input types to pick from but we'll start by covering some of the most common types.

Tables

Open tables.html and navigate to the tables page in your browser. Notice that the same table appears twice in the page and markup. However it is slightly different in both appearance and code. Let's look at the differences.

Wrapping Up

After seeing some of HTML's most commonly used elements in action you should feel a lot more comfortable using these in your own markup. A little bit of explanation goes a long way to get used to where and how to use these elements. HTML elements, their features and specifics will quickly become second nature to you as we build on top of them.

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!