Post
Ask Question

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.

  1. 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.
  2. 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.
  3. 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

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 <p> tag. Text inside <p> (opening) and </p> (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 <b> and </b> tags. The <b> 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 <i> and </i> tags. The <i> 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 <u> and </u> tags.

Example

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

Output

HTML

Strong in HTML

You can use <strong> 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 <em> tag is used to indicate emphasis. The <em> tag surrounds the word/term being emphasized. When you use the <em> tag, then inside the <em> and </em> 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 <b> and <strong> and between <i> and <em>?

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

However, you would use <strong> 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 <b> tag, the voice program might speak the text differently, with emphasis or in a different tone. The same goes for using <em>.

Also, using <strong> instead of <b> 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: <sup> contains text that should be superscript, and <sub> 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 <br> tag specifies a break between lines. It helps write a poem or an address where the division of lines is significant. The HTML <br> tag is empty; in other words, an HTML <br> 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 <br> to increase the gap between lines of text; use the CSS margin property or the <p> 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

  1. HTML pages are text documents.
  2. HTML uses tags that have some special meaning. HTML tags are keywords, in other words, reserved words.
  3. HTML tags are also called HTML elements.
  4. An HTML element may contain attributes that provide more about the element; attributes always exist as name and value pairs.
  5. An HTML element describes an HTML page structure.
  6. HTML has many text formatting tags, like <h1>...<h6>, <p>, <b>, <i>, <u>, <strong>, <sup>, <sub>, <br>, <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


Similar Articles