1. HTML Introduction
This introductory tutorial focus on some key particulars about HTML markup. Firstly, HTML5 is a vital solution to web development. Further, this tutorial enlightens some basics of HTML markup with simple and advanced examples. Additionally, information about simple HTML page structure and brief cognition about HTML5 tags is revealed in this introduction. Navigate to the appropriate segment from the content list or keep reading continuously.
2. What is HTML Markup?
The following list reveals what is HTML and what is its purpose in web pages:
- First of all, HTML Stands for HyperText Markup Language and is just a markup language
- Certainly, it has nothing to do with logic and therefore, it is not a programming language
- Also, HTML5 is the latest version of HTML
- Importantly, it is the core and basic building block of any web page
- Further, it possesses markup and standards to define different segments and elements on a web page
3. What are HTML Markup Basics?
As the preceding lines describe what is HTML? It's time to get on and learn the HTML basics. Hopefully, these basics of HTML5 will adequately communicate the fundamental concepts of HTML. The basic principles of HTML coding for beginners are listed below:
- First of all, HTML is created and maintained by W3C, now 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 web page content.
- Meanwhile, these HTML elements are interpreted by HTML tags.
- Moreover, the browser renders an HTML tag according to the specific element.
- Then the browser displays the rendered HTML elements on the screen.
- Most Importantly, the browser does not display any HTML tag on the screen.
- Also, the browser does not need any compiler to render the markup, in fact, it is independent.
- Unlike programming languages, it is a loosely typed language and displays some results, even if the markup has errors.
- Also, it provides a comprehensive list of HTML tags or elements according to the requirement.
- Furthermore, HTML imparts the facility to include headings, paragraphs, links, images, and many other useful elements.
3.1. HTML Compiler
Since HTML does not require any compiler, therefore the browser renders the HTML5 markup itself. Hence, we can write markup including the HTML tags, e.g. <p>, <h2>, <img> etc. Interestingly, the HTML markup alone values nothing in a web page. Instead, the markup is coded alongside CSS and Javascript, and many other languages. CSS changes the appearance of code blocks whereas, Javascript interacts with the behavior and responses of the HTML5 elements. Making a simplistic web page, only requires some basic knowledge of HTML and CSS.
Consider This:
- Importantly, HTML does not converge on the styling of the web page content.
- In addition, it provides the facility to add style attributes or link external styles.
- Thus, CSS is responsible for the content styling and aesthetics of an HTML5 document.
4. HTML Examples
4.1. Basic Example
Below is a basic HTML5 template that includes elementary HTML code to define the document.
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>
Explanation
| <!Doctype HTML> | This tag tells the browser that the version of HTML is HTML5. |
| <html> | The <html> is the opening tag of an HTML5 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> | The </head> is the closing tag of the head element. |
| <body> | The body element encloses all the visible content of a web page. |
| <h2> | It is the heading of document. |
| </h2> | Closing tag of h2 heading. |
| <p> | The paragraph element define paragraphs in a document. |
| </p> | The closing tag of paragraph. |
| </body> | It is the closing tag of the body element. |
| </html> | And finally, the </html> tag tells the end of the web page. |
Note:
- Every HTML tag must be closed at the end of the element with a forward slash(/).
- In addition, if we do not close a tag, it may create inappropriate results, that may break the document's structure.
- Importantly, the <!Doctype> element does not have an ending tag like many other HTML empty elements.
4.2. Output
As you have observed the basics of the HTML code, that describe the primary layout of a web page. Meanwhile, after running this code on the browser, it generates the following output on the screen. h2 and p elements render output on the browser screen. Whereas, the rest of the HTML markup took part in creating the document structure.
Output
Heading of the Document
This page contains HTML introductory information
4.3. Advanced Example
The subsequent HTML example is an advanced instance that represents 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 it 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> <input type="text" name="name" /> <label>Your Email Address</label> <input type="email" name="email" /> <label>Your Password</label> <input type="password" name="pass" /> <label>Confirm Your Password</label> <input type="password" name="pass" /> <label>Your Gender</label> <input type="radio" id="gender" name="gender" value="male"/>Male <input type="radio" id="gender" name="gender" value="female"/>Female Your Address: <textarea></textarea> <input type="submit" value="sign up" /> </fieldset> </form> </body> </html>
4.4. What is an HTML Tag?
- Basically, the HTML tags take an essential part in HTML5 markup.
- In addition, these tags cooperate in HTML structure and combine to form elements.
- An HTML tag is basically a tag name, surrounded by angular brackets e.g. <form>.
- Further, all HTML5 tags have a starting tag and an ending tag.
- Moreover, they always come in pairs, although there are some exceptions.
Basic Example
<tagname> Content goes here..... </tagname> Note: A forward slash(/) is must in ending tag.
5. HTML Markup Basic Structure
A visual idea of HTML basic structure is presented below. Importantly, this HTML5 basic layout displays the area with white background, that is only visible on the screen. Rest is just the markup structure to cope well with the standards of HTML5 document.
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h2>Heading</h2>
<p>This is a paragraph</p>
</body>
</html>