Starting with HTML

HTML Editor
Tag vs Element
HTML Basic

1. HTML Editor

To learn HTML, you need to have an editing tool. However, there are so many tools that you get confused in your selection. Therefore, take a moment to read the following article, which provides some useful tips for you:

HTML Editors

2. Tag vs Element

Before starting with HTML, we need to distinguish between two concepts of Tag and Element.

An element is a tag which contains a opening tag, an closing tag, an attribute and the content in the middle. It looks like the above illustration.

In reality, the concepts of Tag and Element are often used interchangeably. That means Tag is Element and Element is Tag. To make it simple, I use the concepts of Tag and Element with the same meaning in this website.

3. HTML Basic

No ADS

All of the HTML documents start with a document type declaration, or doctype, <!DOCTYPE html>. This is the declaration of HTML5, whereas the declaration of HTML4 is a bit different and quite lengthy. You should use HTML5 declaration because now most websites use HTML5.

All contents of the HTML documents are between <html> opening tag and </html> closing tags.

Two direct sub tags of <htm> are <head> and <body> tags.

<head>

In the middle of <head>.. </head>, you can set some basic information for the page such as:

Page title
Meta tags containing keywords, a document description.
The encoding meta tag of the page.
<script>, <style>, <link> tags and so on.

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <meta charset="UTF-8">
      <meta name="description" content="My First HTML5">
      <meta name="author" content="o7planning">
      ...
   </head>
   <body>
     .....
   </body>
</html>

<body>

In the middle of <body> .. </body>, you will write all the content that show up in the browser. Sometimes you can also put <script>, <style>, <link> tags here.

Html Link

Let's create a link to the address of google.com, for example:

link-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Link Example</title>
      <meta charset="UTF-8">
   </head>
   <body>
     <p>Click the link below to access google.com</p>
     <a href="https://google.com">Google</a>
   </body>
</html>

With Atom Editor, you can view the interface of the page by using Atom HTML Preview during the code writing process.
Install Atom HTML Preview

HTML List

list-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>HTML List</title>
      <meta charset="UTF-8">
   </head>
   <body>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
      </ul>  
      <ol>
        <li>HTML</li>
        <li>CSS</li>
      </ol>
   </body>
</html>