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

in this article, we discuss What is HTML5? Your One Stop Solution to Build a Web Page

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

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

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.

Origin of HTML 429x300 1

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.

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

What is HTML?

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
What is HTML5? Your One Stop Solution to Build a Web Page

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.

  1. 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.
  2. 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.
structure
What is HTML5? Your One Stop Solution to Build a Web Page

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

  1. The <html></html> tag is the highest level element that encloses every HTML page.
  2. The <head></head> tag holds meta information such as the page’s title and charset.
  3. 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.

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

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="<a href="https://example.com">https://example.com</a>">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:

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

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

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>

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

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.thestackoverflow.com">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="thestackoverflow" 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.

  1. <ul>Unordered list sorts items using plain bullets.
  2. <ol>Ordered list uses different schemes of numbers to list your items.
  3. <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>

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

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">Basic HTML</font></h1>
<p><font color="white">Learn about HTML <a href="www.thestackoverflow.com">here</a></font></p>
 
<center><img src="image.jpg" alt="thestackoverflow" style="width:640px;height:360px"></center>
<ul><font color="white">
<li>Full Stack</li>
<li>Web Development</li>
<li>Python</li>

</ul></font>
</body>
</body>
<button>Click here</button>
 
</body>
</html>

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

Also Check out Pricing Table Using HTML And CSS

If you interested in Entertainment genre please check this also

Related Posts

2 thoughts on “What is HTML5? Your One Stop Solution to Build a Web Page

Leave a Reply

Your email address will not be published. Required fields are marked *