HTML For Beginners: Part 1

Introduction

This article is mainly intended for beginners. In which I will explain what HTML and HTML5 are. I will explain how you can create your own HTML website using HTML.

In this article, Part 1 of the HTML for Beginners series, we will cover the following topics,

How people interact with the web
How the web works
Introduction to HTML
What HTML attributes, and values are
Head, Title, and Body tags in HTML
HTML Headings
Paragraphs
Bold, Italic, Underline, Strong, and Mark
Super-Script and Sub-Script
Line Breaks and Horizontal Rule
Quotations
Abbreviations and Acronyms
Citations and Definitions
Address
Insert, Strike, and Delete

How Does Everyone Accesses The Web?

Before explaining HTML, it is essential to understand how people interact with the web and clarify some terminologies.

Web Browser- A web browser is just software people use to access websites. To view a webpage, a user might type a web address or an IP address into their browser; they can access it using links or bookmarks. The most popular web browsers are Google Chrome, Firefox, Internet Explorer, Safari, and Opera.
Web Server- When you type a web address into your web browser, the request is sent across the internet to a particular computer, a web server that hosts the website. Some of the big companies have their web server. But we commonly use the service of a web hosting company that charges a fee to host your site on their server. Some of the most common web hosting companies are GoDaddy, HostGator, DreamHost, Blue Host, NearlyFreeSpeech.NET, 1&1, and A Small Orange.
Devices- Devices are nothing but a system in which many web browsers and other software exist to access the internet. It includes desktop computers, laptops, tablets, and mobile phones.

How The Web Works

When you visit a website, the website can be hosted anywhere in the world, and every web server has an IP address, so by using that, you can visit a site. Still, we cannot remember the IP addresses of all the websites to find the location of the web server. Your browser will first connect to a Domain Name System (DNS).

Introduction to HTML

HyperText Markup Language (HTML) is a markup language that describes web documents. HTML describes the structure of the web pages.

To understand the structure of the web pages, let's use an example and don't worry about what the code means. I will explain all the codes below.

<html>
  <body>
    <h1>Main Heading
    </h1>
    <p>
      This is First paragraph of heading 1
    </p>
    <h2>Sub-Heading 1
    </h2>
    <p>
      This is First paragraph of sub heading 1
    </p>
    <h2>Sub-Heading 2
    </h2>
    <p>
      This is First paragraph of sub heading 2
    </p>
  </body>
</html>

HTML code (the colorful text) in angle brackets is called HTML elements. Elements usually comprise two tags, an opening tag, and a closing tag. In the closing tag, an extra forward slash is available. An element is part of a webpage or document. An element can contain text or images, or links. Each element has a special meaning for the browser. Mainly HTML pages use elements to describe the structure of the page.

Structure of an HTML Page

To explain the structure of an HTML document, I am taking the preceding example. And in the preceding code, various elements have opening and closing tags. Look at the following diagram that will explain everything about the structure:

HTML

HTML Tags / Elements

HTML tags or elements are keywords or reserved words surrounded by angle brackets. HTML tags usually come in pairs of opening and closing tags.

HTML

HTML Attribute

Attributes describe more about an element. They provide something additional about the contents of an element. HTML attributes always appear with an opening tag and consist of a name and value. An equal sign in the attribute separates the name and value.

HTML

Every HTML page has only two tags inside the HTML tag, Head and Body.

Head tag in HTML

The HTML Head Element (<head>) provides general information (metadata) about the document, including its title and links to or definitions of scripts and style sheets.

Title tag in HTML

The HTML <title> tag (HTML Title Element) defines the document's title, shown in a browser's title bar or on the page's tab. It can only contain text, and any contained tags are not interpreted. You can see the HTML title at either the top of the browser or on the tab for that page (if your browser uses tabs to view multiple pages simultaneously). One of the important things to remember is that the title always comes in the Head section.

Example

<html>
  <head>
    <title>Home Page
    </title>
  </head>
</html>

Output

HTML

Body Tag in HTML

The main browser window will show anything you write inside the <body> tag. In other words, a <body> tag represents the contents of an HTML document. One thing to remember is that there is always only one <body> tag in a document.

Example

<html>
  <head>
    <title>Home Page
    </title>
  </head>
  <body>
    Hello C-Sharp Corner...
  </body>
</html>

The output of the preceding code is,

HTML

How to create your HTML page

If you are new to HTML, you might think, how can I write my HTML code? In other words, what tools exist? You can write HTML code using Notepad or any text editor. There are also many text editors and IDEs that support writing HTML code. Some of the most commonly used tools are the following:

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Microsoft Web-Matrix

But I suggest that if you are new and want to learn HTML perfectly, use Notepad (Windows) or TextEdit (Mac).

Write your HTML code in a text editor and save that file with a .html or .htm extension. Then go to your browser and type the path of the HTML file as the URL and hit Enter. Your page will be shown.

For example, use the following procedure to create an HTML file.

Open Notepad and type the following code:

<html>    
  <head>    
    <title>Home Page</title>    
  </head>    
  <body>    
     Hello C-Sharp Corner...    
  </body>    
</html>

Save this file using a file name and .html or .htm extension, for example, Example.html. Open a web browser and type the file location into the URL and see your output as in the following:

HTML

HTML Text Formatting Elements

Now we understand how to add markup and format our HTML text using text formatting markups. In this section, we will learn the following topics,

Headings
Paragraph
Bold, Italic, Underline, Strong, and Mark
Super-Script and Sub-Script
Line Breaks and Horizontal Rules
Quotations
Abbreviations and Acronyms
Citations and Definitions
Address
Insert, Strike, and Delete

HTML Heading

HTML has 6 levels of headings. <h1> to <h6> defines HTML heading.

HTML

Example: HTML Code.

<html>
  <head>
    <title>Heading in HTML
    </title>
  </head>
  <body>
    <hl>Heading 1
      </h1>
    <h2>Heading 2
    </h2>
    <h3>Heading 3
    </h3>
    <h4>Heading 4
    </h4>
    <h5>Heading 5
    </h5>
    <h6>Heading 6
    </h6>
  </body>
</html>

The following is the output of the preceding code,

HTML

Note. We can control the color, size, and fonts of a heading using CSS.

Paragraph: A paragraph in HTML can be defined using a  tag. Text inside (opening) and (closing) define a paragraph. By default, browsers automatically show some space between subsequent paragraphs.

Example

<html>    
  <head>    
    <title>Paragraph in HTML</title>    
  </head>    
  <body>    
    <h1>C# Language</h1>    
    <p>C# syntax is highly expressive, yet it is also simple and easy to learn. The curly-brace syntax of C# will be instantly recognizable to anyone familiar with C, C++ or Java. Developers who know any of these languages are typically able to begin to work productively in C# within a very short time. 
      C# syntax simplifies many of the complexities of C++ and provides powerful features such as nullable value types, enumerations, delegates, lambda expressions and direct memory access, which are not found in Java.
      C# supports generic methods and types, which provide increased type safety and performance, and iterators, which enable implementers of collection classes to define custom iteration behaviors that are simple to use by client code. Language-Integrated Query (LINQ) expressions make the strongly-typed query a first-class language construct.    
    </p>    
    <p>    
     As an object-oriented language, C# supports the concepts of encapsulation, inheritance, and polymorphism. All variables and methods, including the Main method, the application's entry point, are encapsulated within class definitions. 
      A class may inherit directly from one parent class, but it may implement any number of interfaces. 
      Methods that override virtual methods in a parent class require the override keyword as a way to avoid accidental redefinition. In C#, a struct is like a lightweight class; it is a stack-allocated type that can implement interfaces but does not support inheritance.    
    </p>       
  </body>    
</html>

The following is the output of the preceding code,

HTML

Bold, Italic, Underline, Strong, Emphasis, and Mark in HTML

Bold in HTML

We can make the text bold by enclosing text in the and tags. The  element represents a span of text that is stylistically different from the normal text without conveying any special importance or relevance.

Example

<p>This is the Example of <b>Bold</b></p>

Output

HTML

Italic in HTML

We can make text italicized by enclosing text in and tags. The element represents a span of text that is stylistically different from the normal text without conveying any special importance or relevance.

Example

<p>This is the Example of <i>Italic</i></p>

Output

HTML

Underline in HTML

We can make the text underlined by enclosing text in the and tags.

Example

<p>This is the Example of <u>Underline</u></p>

Output

HTML

Strong in HTML

You can use  if you want some text to be bold. The strong tag surrounds the emphasized word/phrase. That means it's an essential piece of information. You can use CSS to make nested tags appear stronger.

Example

This is <strong>important</strong>. It <strong>really is important. <strong>And this is even more important!</strong></strong>

Output

HTML

Emphasis

The HTML  tag is used to indicate emphasis. The  tag surrounds the word/term being emphasized. When you use the  tag, then inside the  and  tags, the text will be italicized unless modified by CSS.

Example

I can <em>not</em> emphasise this enough!

Output

HTML

Question- Now the question is, what is the difference between  and  and between  and ?

Answer- and refer to styles. Use to make the text bold purely for stylistic reasons. The same goes for . If you use that code, in other words, you want the text to be italicized purely for stylistic reasons.

However, you would use if you wanted that bit of text to look bold and have empathy. That means it's an important piece of information. So why is there a difference?

There is no visual difference in the appearance of the page. The main difference comes with text-to-speech programs, often used by blind people. When blind people look at a website, all the text is spoken to them. This conveys to the blind person that the text is somehow important. When you use a strong instead of tag, the voice program might speak the text differently, with emphasis or in a different tone. The same goes for using .

Also, using  instead of  means using Semantic Markup, which is the best practice.

Mark in HTML

The HTML mark element represents highlighted text for reference purposes due to its relevance in another context.

It is important to understand the intended purpose of this tag. According to the HTML 5 specification:

When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present, but that has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but that is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.

Example

<p>The <mark> element is used to <mark>highlight</mark> text</p>

Output

HTML

Superscript and Subscript:  contains text that should be superscript, and contains text that should be subscript. A subscript is commonly used with footnotes or chemical formulas.

Example

<h1>Superscript Example</h1>    
   <p>Rohan is in 12<sup>th</sup> standard</p>    
   <p>(a+b)<sup>3</sup>=a<sup>3</sup> + 3a<sup>2</sup>b + 3ab<sup>2</sup> + b<sup>3</sup> </p>    
    
<h1>Subscript Example</h1>    
<p>    
   When H<sub>2</sub>SO<sub>4</sub> reacts with NaOH then it forms Na<sub>2</sub>SO<sub>4</sub> and H<sub>2</sub>O.    
</p>    
<p>    
    H<sub>2</sub>SO<sub>4</sub> + 2NaOH ====> Na<sub>2</sub>SO<sub>4</sub> + H<sub>2</sub>O.    
</p>

The output of the preceding code,

HTML

Line Breaks and Horizontal Rules in HTML

Line Break in HTML

The HTML   tag specifies a break between lines. It helps write a poem or an address where the division of lines is significant. The HTML   tag is empty; in other words, an HTML   has no end tag.

<p>A million stars up in the sky<br>    
   one shines brighter, I can't deny<br>    
   A love so precious, a love so true<br>    
   a love that comes from me to you<br>    
   The angels sing when you are near<br>    
   within your arms, I have nothing to fear<br>    
   You always know just what to say <br>    
   just talking to you makes my day<br>    
   I love you, honey, with all of my heart<br>    
   together forever and never to part.
</p>

Output

HTML

Note. Please remember one thing; do not use to increase the gap between lines of text; use the CSS margin property or the element.

Horizontal Rules in HTML

The HTML <hr> tag specifies a paragraph-level thematic break in an HTML document. A paragraph-level thematic break could be a scene change in a story, play, or drama or a transition to another topic within a reference book section.

Example

<p>This is paragraph 1</p>    
   <hr>    
<p>This is paragraph 2</p>

Output

HTML

Quotations in HTML

In HTML, <q> and <blockquote> are commonly used for marking up quotations. <q> is used for shorter quotes. A browser normally inserts quotation marks around the text. And the <blockquote> tag is usually used for longer quotes rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, whereas a text representation of the source can be provided using the <cite> element.

Example

<p><q>Google Glass</q> is a type of wearable technology with an <q>optical head-mounted display (OHMD)</q></p>    
<blockquote cite="http://www.quotationspage.com/quote/24948.html">    
    <p>    
        If A is success in life, then A = x + y + z. Work is x; y is play; and z is keeping your mouth shut.    
   </p>     
</blockquote>

Output

HTML

Abbreviations and Acronyms in HTML

If you use abbreviations, you should use the <abbr> tag, and for Acronyms, use <acronym>. The use of these tags is mainly for SEO. Maybe some person searches with shortened forms of words, and some search will full forms, so using <abbr> and <acronym> tags is always important. Both tags use a title attribute to spell out the full form. The title will be shown when your mouse hovers over the abbreviation or acronym.

Example

<p>     
     <abbr title="Professor">Prof.</abbr> Seeger is an expert in optical sensor technologies.    
</p>     
    
<p>    
  <acronym title="National Aeronautics and Space Administration">NASA</acronym> just launched a new app (3d View app) for students. So student can get good knowledge about space science...    
</p>

Output

HTML

Citations in HTML

HTML uses the <cite> tag to represent the title of a work.

Example

<p>    
   <cite>The Ramcharitmanas</cite> is written by goswami tulsidas.    
</p>

The output of the preceding code,

HTML

Definitions in HTML

HTML uses the <dfn> tag to represent the defining instance of the terms. The first time you explain a new terminology in the document, you can use <dfn>. This can also contain the title.

Example

<p>    
    <dfn><abbr title="Asynchronous JavaScript and XML">AJAX</abbr></dfn> is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.      
</p>

Output

HTML \

Address in HTML

HTML has the <address> tag to define the contact information of an author or owner of a document or article. If the <address> tag is inside <body>, it shows the information about that document. If it exists in an <article>, then it represents the contact information for that article.

Example

<address>    
   <a href="mailto:[email protected]"><b>Sourabh Somani</b></a><br>     
   Website:<br>    
   sourabhsomani.com<br>    
   Chittorgarh, <br>    
   Rajasthan    
</address>

Output

HTML

Insert and Delete in HTML

The <ins> element can show content inserted into a document, whereas the <del> element shows text deleted from the document.

Example

<p>Application Form Submission Date:<del>30 Sept 2015</del> <ins>8 Oct 2015</ins></p>

Output

HTML

Strike: The <s> tag in HTML defines a strike that specifies the no longer correct or relevant text. The difference between <del> and <s> is <del> is used when text has been replaced or deleted.

Example

<p><b>Latest Version of Android:</b></p>    
<p><s>Android 1.6 – Donut</s></p>    
<p><s>Android 2.0 – Eclair</s></p>    
<p><s>Android 2.2 – Froyo</s></p>    
<p><s>Android 2.3 – Gingerbread</s></p>    
<p><s>Android 3.0 – Honeycomb</s></p>    
<p><s>Android 4.0 – Ice Cream Sandwich</s></p>    
<p><s>Android 4.1 – Jelly Bean</s></p>    
<p><s>Android 4.4 – KitKat</s></p>    
<p>Android 5.0 – Lollipop</p>

Output

HTML

Summary

HTML pages are text documents.
HTML uses tags that have some special meaning. HTML tags are keywords, in other words, reserved words.
HTML tags are also called HTML elements.
An HTML element may contain attributes that provide more about the element; attributes always exist as name and value pairs.
An HTML element describes an HTML page structure.
HTML has many text formatting tags, like <h1>...<h6>, , , , , , , , , <hr>, <blockquote>, <q>, <abbr>, <acronym>, <address>, <ins>, <del>, <s> and so on.

In the next part of this series, you will learn more about:

Images in HTML
Links
Lists
Tables

18 Comments

Join the conversation! Your thoughts help the community grow.

Priti Kochad6y ago
It's Good and very helpful. Thanks
Gowtham Rajamanickam11y ago
sorry keep it up ur good work
- Sourabh Somani11y ago
  Thanks
Gowtham Rajamanickam11y ago
eep it up
Gowtham Rajamanickam11y ago
good
chhoturam jat11y ago
very well effort
Tom Mohan11y ago
Your are welcome Sourabh Somani
Tom Mohan11y ago
Good effort
- Sourabh Somani11y ago
  Thank you :)
Saineshwar Bageri11y ago
nice one sir
- Sourabh Somani11y ago
  Thank you :)
Sibeesh Venu11y ago
You welcome... :)
Sibeesh Venu11y ago
Good one....
- Sourabh Somani11y ago
  Sibeesh Venu Thank you :)
Shaili Dashora11y ago
Nice Article Sourabh Somani .
- Sourabh Somani11y ago
  Thank you Shaili Dashora
Rahul Kumar Saxena11y ago
Nicely Explain..
- Sourabh Somani11y ago
  Rahul Saxena: Thank You