HTML Basics

HyperText Markup Language, otherwise known as HTML, is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:

It's the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. To get started, you'll need to create an index.html file which you can find out how to do here.

Elements

Let's break this down a bit. The element's main parts are as follows:

  • Opening Tag:

    This is consists of the name of the element, in this case p, wrapped in closing angle brackets. This states where the element begins.

    p
  • Closing Tag:

    This is the same as the opening tag, expect that it includes a forward slash before the element name. This states where the element ends and MUST be included. Otherwise, it can lead to strange results.

    p
  • The Content:

    This is just the content of the element which, in this case, is just text. An element's content can also be more elements. We'll learn more about Nesting elements later.

    Grumpy Donkey
  • The Element:

    The opening tag, closing tag, & content all together comprise of a single element.

    pGrumpy Donkeyp
Attributes

Attributes contain additional information about an element. Here, class is the attribute's name and beware is the attribute's value. The class attribute allows you to give the element a non-unique identifier that can be used to target it (including all other elements with the same class value). This is commonly used for styling in CSS sheets.

Nesting Elements

As stated earlier, it is possible put elements within other elements — this is called nesting. For example, if we wanted to truly emphasize that our Donkey was really grumpy, we could wrap the text "really" in a strong element, which would embolden the text.

pThis Donkey is strongReallystrong grumpyp

You always need to make sure that your elements are nested properly. In the example above, we opened the p element first, then the strong element; therefore, we need to close the strong element first, then the p element.

Void Elements

Some elements have no content and don't require a closing tag to work — these are called void elements. For example, take an img tag.

img srcimages/grump-donkey.png alta test image

This contains two attributes, but no inner text and closing tags like we had in the previous examples. This is because an image element doesn't wrap content to affect it. It's purpose is to embed an image in the HTML page in the place it appears, given it has a src.

Document Structure

Now we knows the basics of HTML Elements, but they aren't handy on their own. They need a foundation. Now we'll look at how individual elements are combined to form an entire HTML page. A website needs it's files where it stores the code that helps it to function. HTML is stored in a index.html file. 

DOCTYPE html
html langen
   head
      meta charsetUTF-8 
      meta nameviewport contentwidth=device-width, initial-scale=1.0 
      titleThe Grumpy Donkey Websitetitle
   head
   body
      Document Content
   body
html
  • DOCTYPE html — This is what you'll see at the start of every html website. It's a require preamble. n the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now.
  • html html — This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document.
  • head head — This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
  • meta charsetUTF-8 — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
  • meta nameviewport content=width=device-width, initial-scale=1.0 — A long one but, the viewport attribute ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down. The content attribute gives the value associated with the http-equiv or name attribute.
  • title title — This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
  • body body — This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.
Images

Let's turn our attention to the img element for a moment:

img srcimages/grump-donkey.png alta test image

As we stated before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

We have also included an alt (alternative) attribute. In the alt attribute, you specify descriptive text for users who cannot see the image, usually because of the following reason:

  1. They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
  2. Something has gone wrong causing the image not to display.

The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys

Marking Up Text

In this section, you will learn some essential HTML elements you'll use for marking up text.

Headings

heading elements allow you to specify certain parts of your content are headings — or subheadings. In the same way that a book has a title, chapter titles, & subtitles, HTML documents can too. There are 6 heading levels at your disposal: h1 - h6. You'll usually only be using 3 to 4 at most though. 

                        6 Heading Levels:
                        h1Heading 1h1
                        h2Heading 2h2
                        h3Heading 3h3
                        h4Heading 4h4
                        h5Heading 5h5
                        h6Heading 6h6

Any text in HTML between by !-- and -- is an HTML comment. Your browser ignores comments and doesn't render it. It's commonly used as notes, label and as its name suggests, comments.

You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.

Lists

A lot of web's content is comprised of lists. Even in this website, you can find numerous list elements. Marking up lists always consists of at least 2 elements with the most common list types being ordered and unordered lists:

  1. Unordered Lists:

    These are lists where the order of the items don't matter. They're look and work a lot like the common bullet list that you find in a Word Document. They're wrapped in a ul element.

  2. Ordered Lists:

    They're exactly like unordered lists, expect that, as their name suggests, they're ordered. They work like the common Word Document number list and are wrapped an ol element.

Each item inside a List is put inside a li (list item) element.

For example, if we wanted to turn the part of the following paragraph into a list:

                        p
                           Some of the possible reasons for our Donkey's bad mood could be that
                           he's hungry, he has overdue taxes, or he just can't pay his bills.
                        p

We could modify the markup to this:

pSome of the possible reasons for our Donkey's bad mood could be the following:p

ul
   liHe's hungryli
   liHe has overdue taxesli
   liHe can't pay his billsli
ul