What is HTML? Your One Stop Solution to Build a Web Page

The Complete WebDeveloper (38 Blogs) Become a Certified Professional

HTML is one of the most widely used languages on Web to develop web pages. It helps you delve into the world of Web Development and improve your skills. So, let’s get into the details of What is HTML and what are the fundamentals of HTML in the following sequence:

Origin of HTML
What is HTML?
HTML Structure
How does HTML work?
Fundamentals of HTML

Origin of HTML

The history of the hypertext markup language(HTML) is a strange and interesting tale. The man behind HTML, Tim Berners-Lee was putting together his first elementary browsing and authoring system for the Web and created a quick little hypertext language that would serve his purposes.

HTML Demo image But the problem lied in the simplicity of the language. HTML was text-based and anyone could use any editor or word processor to create or convert documents for the Web. The developers started implementing new features in their browsers and started releasing advanced versions of HTML.

HTML Tutorial For Beginners | Edureka

What is HTML?

A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes the text more interactive and dynamic. It can turn text into images, tables, links, etc.

HTML stands for Hyper Text Markup Language and it is the standard markup language for creating web pages and web applications. It is used to describe the structure of Web pages using markup.

HTML Structure

HTML tags have two main types: block-level and inline tags.

Block-level elements take up the full available space and always start a new line in the document. Example of block tags includes headings and paragraphs.
Inline elements only take up as much space as they need and don’t start a new line on the page. They usually serve to format the inner contents of block-level elements. Some of the examples of inline tags include links and emphasized strings.

The three block level tags that you need for your HTML document are <html>, <head>, and <body>.

The <html></html> tag is the highest level element that encloses every HTML page.
The <head></head> tag holds meta information such as the page’s title and charset.
Finally, the <body></body> tag encloses all the content that appears on the page.

How does HTML work?

HTML documents end with the .html or .htm extension. You can view it using any web browser. The browser reads the HTML file and renders the content for users to view it.

Each HTML page consists of a set of tags or elements which are known as the building blocks of web pages. They create a hierarchy that structures the content into sections, paragraphs, headings, and other content blocks.

Let’s take an example and see how the elements are structured in HTML:


<div>
<h1>The Main Heading</h1>
<h2>Subheading</h2>
<p>Paragraph</p>
<img src="/" alt="Image">
<p>Second Paragraph with <a href="https://example.com">hyperlink</a></p>
</div>

Now let’s move ahead with our what is HTML? article and get in to the details of the basic tags in HTML.

Fundamentals of HTML

To build a webpage with HTML, you need to know about some of the basic elements such as:

Headings

HTML headings are defined with <h1> to <h6> tags.

<h1> defines the most important heading. Whereas, <h6> defines the least important heading:


<h1>First Heading</h1>
<h2>Second Headng</h2>
<h3>Third Heading</h3>
<h4>Fourth Heading</h4>
<h5>Fifth Heading</h5>
<h6>Sixth Heading</h6>

Paragraphs

HTML paragraphs are defined with <p> tags. You can add as many paragraphs as you want with this tag.


<p>First Paragraph</p>
<p>Second Paragraph.</p>

Links

HTML links are hyperlinks. You can click on a link and redirect to another document or webpage. Links are defined with <a> tags:


<a href="www.edureka.co">Add Link</a>

Images

Images are required to beautify or depict complex concepts in simple ways on your web page. HTML images are defined with <img> tags.

The source file (src), alternative text (alt), width, and height are provided as attributes:


<img src="image.jpg" alt="Edureka" style="width:120px;height:150px"

Buttons

The <button> element is used for creating an HTML button. All the texts between the opening and closing tags appear as text on the button. It defines a clickable button. Inside a <button> element you can add texts or images:


<button>Click here</button>

Lists

HTML provides three ways to specify lists of information. All lists must contain one or more list elements.

<ul>: Unordered list sorts items using plain bullets.
<ol>: Ordered list uses different schemes of numbers to list your items.
<dl>: A definition list arranges your items in the same way as they are arranged in a dictionary.

Unordered List

This list is created by using HTML <ul> tag:


<ul>
<li>Python</li>
<li>Java</li>
<li>DevOps</li>
<li>Cloud Computing</li>
</ol>
</ul>

Ordered List

This list is created by using <ol> tag:


<ol>
<li>Python</li>
<li>Java</li>
<li>DevOps</li>
<li>Cloud Computing</li>
</ol>

Definition List

The definition list is the ideal way to present a glossary, list of terms, or other name/value list. It is created by using <dl> , <dt> and <dd> tags:


<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>

Tables

An HTML table is defined with a <table> tag.

Rows are defined with <tr> tags.
Headers are defined with <th> tags
Table Cells are defined with <td> tags.


<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Now that you know about the fundamentals, let’s have a look at the complete code to create a basic HTML webpage.

Example.html


<html>
<head>
<title>What is HTML?</title>
</head>
<body BGCOLOR="black">
<h1><font color="white">Welcome to Edureka!</font></h1>
<p><font color="white">Learn about HTML <a href="www.edureka.co">here</a></font></p>

<center><img src="image.jpg" alt="Edureka" style="width:640px;height:360px"></center>
<ul><font color="white">
<li>Full Stack</li>
<li>Java</li>
<li>Python</li>
<li>Cloud Computing</li>
</ul></font>
</body>
</body>
<button>Click here</button>

</body>
</html>

This will create a basic webpage as output:

A Flutter Training Course is a great way to learn about the latest trends and best practices in mobile app development.

Now that you know what is HTML, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).

Check out the Angular Certification by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.

If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the React JS Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.

Got a question for us? Please mention it in the comments section of “What is HTML?” and we will get back to you.

Upcoming Batches For Web Developer Certification Training Course