1. HTML Introduction

HTML introduction may be described as the approved solution to web development. Introduction to HTML contains some basic information regarding HTML basics, basic examples, basic web page structure, etc. Navigate to the suitable segment from the following content list or keep reading continuously.

Tutorial Contents:

  1. Intro To HTML Language
  2. What is HTML? Is it a Programming Language?
  3. Ultimate Guide to HTML Markup Basics
  4. Simple and Detailed Explanation of HTML with Examples
  5. Basic Page Structure of an HTML Document

2. What is HTML Markup?

The following list will reveal what is HTML and what is the basic purpose of HTML in web pages:

  • Firstly, HTML Stands for HyperText Markup Language and is just a markup language
  • Certainly, it has nothing to do with programming and, therefore, not a programming language
  • Also, HTML5 is the latest version of HTML
  • HTML is the core and basic building block of any webpage
  • Secondly, it comprises of markup, which is the key to define different segments and elements on the page
  • Furthermore, HTML basic code for the website is the fundamental thing in structuring data on the web page

3. What are HTML Basics?

Since the preceding lines describe that what is HTML? its time to proceed further and learn some HTML basics. Hopefully, these basics of HTML will adequately communicate the core concept, to make the base strong. The basics of HTML coding for beginners are listed below:

  • First of all, HTML is created and maintained by W3Cnow by WHATWG
  • HTML outlines the basic structure of any webpage, regardless of device type or screen size
  • Also, any webpage contains different sections and elements to differentiate the content on the screen
  • Further, an HTML element tells the browser about the behavior of the content
  • Meanwhile, these HTML elements are described by HTML tags
  • After that, the browser renders the HTML Tags according to the specific element
  • Then the browser display the rendered HTML elements on the screen
  • Most Importantly, the browser does not display HTML Tags
  • Also, the browser does not need any compiler to render the markup, in-fact it is independent
  • Unlike programming languages, it is loosely typed language and display some results, even if the markup has errors
  • Also, it provides a comprehensive list of HTML elements according to need
  • Furthermore, HTML provides the facility to add headings, paragraphs, links, images, lists, forms, style content, and much more

3.1. HTML Compiler

Since HTML does not require any compiler, therefore the browser does compilation itself. We can write markup which include HTML tags, e.g. <p>, <h2>, <img src=”#” alt=”HTML Image Tag” /> etc. The markup alone values nothing instead, the markup is coded alongside CSS and Javascript and many other languages. CSS changes the appearance of code blocks, whereas, Javascript changes the blocks’ responses. To make a simplistic web page, it only requires some basic knowledge of HTML and CSS.

Consider This:

  • Importantly, HTML does not converge on the styling of the web-page content
  • However, it provides the facility to add style attributes or link external styles
  • Hence, CSS is responsible for content styling and aesthetics

4. HTML Examples

4.1. Basic Example

Below is a basic HTML template that includes basic HTML code to define the document.

Basic Example

<!Doctype HTML>
<html>
<head>
<title>The Title of the Document</title>
</head>
<!–The Content after this tag is visible–>
<body>
<!– Heading–>
<h2>Heading of the Document</h2>
<!– This is a paragraph–>
<p>The page contains HTML introductory information.</p>
</body>
</html>

Try in CodeLab

Explanation

<!Doctype HTML> It tells the browser that the version of HTML is HTML5.
<html> <html> is the opening tag of any HTML document. It is the parent element of all the markup.
<head> This element contains meta-data about the document.
Meta-data is the information of the document information. e.g title, subject, location, etc
<title> The title of the document is defined by this element.
</title> It is the closing tag of the title element.
</head> </head> is the closing tag of head element.
<body> The body element, all visible content is contained in this element.
<h2> It is the heading of document.
</h2> Closing tag of h2 heading.
<p> Paragraph element defines paragraphs in a document.
</p> The closing tag of paragraph.
</body> Closing tag of body element.
</html> And finally, the /html tag tells the end of the document.

Note:

  • Every HTML tag must be closed at the end of the element with a forward slash(/)
  • Also, if we do not close a tag, it may create in-appropriate results, that may break the document’s structure
  • Finally, <!Doctype> do not have a closing tag like many other HTML empty tags

4.2. Output

As you have noticed the basic HTML code, which describes the basic layout of a web page. After running this code on the web page, it generates the following output in the browser. h2 and p elements displayed output on the screen, while the rest of the markup took part in creating a document structure.

Output

Heading of the Document

This page contains HTML introductory information

4.3. Advanced Example

The subsequent HTML example is an advanced example that layouts an HTML form with different input fields. Also, a legend is made using a fieldset element that spans around the HTML form. Visualize the actual form in codelab to understand completely.

Advanced Example

<!DOCTYPE html>  
<html>  
<head>  
  <title>HTML Advanced Example</title>  
</head>  
<body>  
  <h3>Registration form</h3>  
  <form>  
  <fieldset>  
  <legend>User personal information</legend>  
  <label>Your Name</label><br>  
  <input type=”text” name=”name”><br>  
  <label>Your Email Address</label><br>  
  <input type=”email” name=”email”><br>  
  <label>Your Password</label><br>  
  <input type=”password” name=”pass”><br>  
  <label>Confirm Your Password</label><br>  
  <input type=”password” name=”pass”><br>  
  <br><label>Your Gender</label><br>  
  <input type=”radio” id=”gender” name=”gender” value=”male”/>Male  <br>  
  <input type=”radio” id=”gender” name=”gender” value=”female”/>Female <br/>    
  <br>Your Address:<br>  
  <textarea></textarea><br>  
  <input type=”submit” value=”sign-up”>  
  </fieldset>  
  </form>  
</body>  
</html> 

Try in CodeLab

4.4. What is an HTML Tag?

  • Basically, HTML tags take crucial part in html basic code
  • The HTML tag take part in HTML basic structure and combine to form HTML elements
  • A tag basically is a tag name, surrounded by angular brackets e.g. <form>
  • Also, all HTML tags have a starting tag and an ending tag and they always come in pairs, although there are some exceptions
  • These are also called opening tag and closing tag
  • Basically, all tags comprise of angular brackets, <, > and tag name
  • Most importantly, the ending/closing tags has a forward slash before the element name /

Basic Example

<tagname> Content goes here….. </tagname>
Note: A forward slash(/) is must in ending tag.

Try in CodeLab

5. HTML Basic Structure

A visual idea of HTML basic structure is presented below.This HTML basic layout displays that the area with white background, is visible on the screen. Rest is just the structure of the document.

<html>

<head>

<title>Introduction to HTML</title>

</head>

<body>

<h2>Heading</h2>
<p>This is a paragraph</p>

</body>

</html>

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us