HTML for Beginners – Includes Tags for HTML5

Whether you’re interested in becoming a professional web developer or you want to learn more about how websites work, the first thing you need to study is HTML.

HTML is the standard language used to create web pages and applications.

What Is HTML?
HTML stands for HyperText Markup Language
HyperText refers to text that contains links to other texts.
Markup refers to the special symbols or codes that are inserted into a document to tell the web browser how to display the document data.
Language refers to the idea that the code is standardized.

What Does HTML Code Look Like?
Basically, HTML code looks just like regular text. The most identifiable feature of HTML code is the use of angle brackets. These angle brackets enclose the markup code which tells the browser how to display the document data.

Here’s an example of some simple HTML code:

The Basics Of HTML Code
Three components form the basic building blocks of HTML code: tags, elements, and attributes. Once you’ve learned the rules for how each of these components functions, you should have no trouble writing and editing HTML.
*HTML Tags: *
Tags are used to separate HTML code from regular text.

Two Important Rules For Using Tags
You must always use angle brackets for tags.
you must always close a tag after opening it.
HTML Elements
An element is an opening tag, a closing tag, and all the content that is included between the two tags.
Let’s take a look at our previous example of how to use bold tags:
This is some text.

In this example, is the opening tag, is the closing tag, and “This is some text.” is the content. When we put it all together, we have an element.
HTML Attributes
Attributes are used to define additional information about an element. They are located inside the opening tag, and usually come in name/value pairs (name=“value”).

All HTML elements can have attributes, but for most elements, we only use them when we need to.
A Step-By-Step Tutorial For Coding Your First HTML Document
In this tutorial, we’ll go through all the steps required to turn a blank text document into a fully functional HTML document that can be viewed in a browser. We’ll look at how to add some of the most commonly used elements to a document, and we’ll try using some attributes for extra customization.

By the end of this tutorial, you’ll have your own “HTML Cheat Sheet” document. In the future, if you forget how to add an image to an HTML document or you’re confused about whether you should be using “ordered” or “unordered” lists, you can come back and check your HTML cheat sheet.
Step 1 – Create A New Document In Your Text Editor
Once you’ve created a new blank document, click “Save” and give the document a name. There are a number of naming conventions that you need to follow when creating an HTML document.
Step 2 – Create A Basic HTML Template
This template will form the foundation of our HTML document. In your text editor, it should look something like this (note: the numbers on the left side are included by some text editors to make your code easier to read – they are NOT part of the code):

Step 4 – Add Some Headings And Preview In The Browser

Step 5 – Add Some Paragraph Text
The next thing we’ll do is add some paragraph elements. Paragraphs contain all our basic text content and can be created using the

tag.
Step 6 – Add Some Formatting To The Text
– Bold text

– Important text

– Italic text

– Emphasized text

– Marked text

– Small text

– Deleted text

– Inserted text

_{– Subscript text}

^{– Superscript text
Step 7 – Add Some Style To The Text
To add style to our text, we can use the style attribute.
Step 8 – Create Some Lists
There are three types of lists – unordered lists, ordered lists and description lists.}

Unordered lists use the

tag. Unordered list items use the
• tag. Each item in the list will be displayed with bullets. Step 9 – Create A Hyperlink Hyperlinks are usually used to link to another internal or external page, but they can actually be used to link to any HTML element. For example, you can link to an image, a sound file, or even a PDF document. Step 10 – Add An Image We can add an image using the tag.

  The image element is one of the few elements that doesn’t require a closing tag. We include all the important information as attributes inside the tag.

  There are three main attributes we can use with images – the source attribute, the alternative text attribute, and the style attribute.
  Step 11 – Create A Table
  Tables in HTML are great for displaying tabular data, such as an address book or a list of product descriptions and prices. Although tables are good for keeping things organized, tables should only be used for displaying data, not for defining the layout of a page.

  We can use HTML to define the structure and contents of a table. We usually use CSS to style the table (eg. adding borders, colors, and text alignment)
  Step 12 – Add A Quotation
  There are two types of quotations – regular quotations and block quotations.

  Regular quotations use the tag and simply add quotation marks around everything inside the element. At first, using this element may seem unnecessary as we can simply use regular quotation marks in the text. But the quotation element becomes important when we start styling our page with CSS. Using CSS, we can style all our quotes at once by selecting all the tags and making them bold, italic, a different size or a different color. Block quotations use the

  tag and create a stylish indented block of text.

  Conclusion

  After completing this tutorial, you should have a solid foundation for coding in HTML.

  You should be able to open the source code of any and know how they affect what is displayed in the browser window. You should be able to identify images, tables, lists, comments and many other HTML elements.