Basics of HTML

In this lesson, we’ll learn the basics of HTML! By the end of this lesson, you should be able to comprehend and write basic HTML.

We’ll cover the following

  • Introduction
    • Tag syntax
    • HTML document structure
      • The <HTML> tag
      • The <head> and <body> tags
      • Doctype
      • HTML comments
    • Tag attributes
    • Common tags

Introduction

HTML (HyperText Markup Language) is not a programming language. It is a markup language. True programming languages have the ability to describe logic. HTML, however, is used to display and format parts of a webpage. It is strictly presentational.

Tag syntax

HTML marks up content with HTML ‘tags’. HTML tags are the basic building blocks of all web pages. Essentially, they format the way that information and text is displayed. They put the content into categories (called elements!) such as ‘heading’, ‘paragraph’, and ‘table’.

A basic HTML tag consists of a name enclosed within ‘angle brackets’ i.e., less than and greater than symbols. Also, these tags usually come in pairs of opening and closing tags. The closing tag is the same as the opening tag except that the closing tag has a forward slash after the less-than symbol. Have a look at the example below.

<tagname> content </tagname>

Some tags are ‘self-closing’ which means that they don’t require a closing tag. For example,

<selfclosing/> content

The diagram below shows an example of a labeled HTML element.

HTML document structure

HTML documents follow a specific structure and require some tags to run properly.

The <HTML> tag

Everything in an HTML document is enclosed in <HTML> tags as highlighted on lines 1 and 8 in the code playground below.

<html>
 <head>
   Content in the head tag.
 </head>
 <body>
   Content in the body tag.
 </body>
</html>

The <head> and <body> tags

Furthermore, valid HTML documents require the <head> and <body> tags too as highlighted on lines 2, 4, 6, and 8 below. Also, the head and body tags have nothing to do with where the content is positioned on the output of the browser — they are used to compartmentalize the document itself.

The <head> tag contains metadata such as the page title, links to CSS and JS files, and keywords that are used by search engines like Google. The metadata is not displayed in the browser.

The <body> tag, on the other hand, contains the actual markup like paragraphs, images, and tables that are displayed in the browser.

<html>
 <head>
   Content in the head tag.
 </head>
  
 <body>
   Content in the body tag.
 </body>
</html>

Doctype

The doctype is a declaration that tells the browser the HTML version that the document is written in. It should be the absolute first thing on the document. Some common doctypes are listed below.

Declaration Type
HTML5<!DOCTYPE html>
HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0. Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML comments

HTML Comments look like <!-- Comment --> and the browser ignores them; you can just put them there for yourself or for others who might look at your HTML document!

Tag attributes

All HTML tags can have ‘attributes’ which provide more information about a certain element. Attributes are always placed in the opening tag of an element and exist as key/value pairs. The values are always in quotes (they can be double or single, but they’re usually double). To illustrate,

<tagname attribute = "value"> content </tagname>

Common tags

The HTML below illustrates how some common tags are used. Notice the <img> tag and how it has an attribute called src.

<!DOCTYPE html>
<html>
 <head>
   <!-- An HTML Comment! -->
 </head>
  
 <body>
   <!-- Headings -->
   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <h3>Heading 3</h3>
   <h4>Heading 4</h4>
   
   <!-- A paragraph -->
   <p> A paragraph </p>
   
   <!-- A link -->
   <a href="https://codingtimes.in/">  CodingTimes </a>
   
   <!-- An Unordered List -->
   <ul style="list-style-type:disc">
     <li>An</li>
     <li>Unordered</li>
     <li>List</li>
   </ul> 
   <ol type="1">
     <li>An</li>
     <li>Ordered</li>
     <li>List</li>
   </ol>
   
   <!-- A table -->
<table>
  <tr>
    <th>Language</th>
    <th>Application</th>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Front End and Back End</td>
  </tr>
  <tr>
    <td>Python</td>
    <td>Back End</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Back End</td>
  </tr>
  <tr>
    <td>C#</td>
    <td>Back End</td>
  </tr>
</table>   
   <!-- An image -->
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png"> 
 
 </body>
</html>

OutPut images—>

Now that we have touched upon the very basics of HTML, let’s get into styling HTML output with CSS in the next lesson!

Also Read – The Server-side and The Client-side

That’s it!
You have successfully completed the post.

Peace Out!

One comment

Leave a Reply

Your email address will not be published.