Basic HTML Page: HTML Tutorial, Tags, Attributes - October 3rd, 2024

Q: How to create an HTML Link?

Use an anchor tag <a to embed a link inside. Use different attributes to make it more effective.

Q: Can we create a web page in HTML?

You can use HTML to create your web page and use CSS to style it after that. HTML is used to create the framework of your web page.

Q: What is the full form of HTML?

The full form of HTML is Hyper Text Markup Langauge.

The following article consists of an HTML tutorial, its definition, tags, structure, syntax, and other major important things related to HTML development. This HTML tutorial teaches you the basics of HTML and the steps to build your web page.

Basic HTML Page for Absolute Beginners

Starting with web development requires learning the basics of HTML, CSS, Javascript, React, and other important techniques. HTML is the first step in starting with web development. HTML is the code used to define the structure of a web page and its content.

The language uses special tags which are used to describe the content and layout of the content inside the web page. HTML is being used widely by developers around the world. It supports the integration of CSS, Javascript, React, etc.

basic page html

This article aims to take you through the process of using HTML and create your website page. We hope you will have a great experience going through this article.

What is HTML?

HTML stands for Hyper Text Markup Langauge. This language is extensively used for creating the website design and structure. HTML tags are used to create the page structure and make it functional. HTML is used to describe the structure of a web page.

It consists of many elements that are used to address how the browser displays the element. With the help of HTML, we can define the headers, paragraphs, links, images, audio, and other parts inside a web page. Knowing HTML is a must to begin with web development.

HTML was first used in 1989. It was developed by Tim Berners Lee, Rober Cailliau, and others. The latest version of HTML is HTML5. You can easily use HTML5 for free on any of your developing environments.

What are HTML Tags?

HTML tags are used to decide the structure of web pages. They are enclosed in angular brackets. There are two major components of HTML tags, open tags and closing tags. The opening tags are used to mark the beginning of any element and the closing tag marks the end of the element. We can easily define the structure of heading, title, audio, images, links, etc.

Let us learn with the help of an example. Consider a header tag H1. Let us represent it with the help of H1 tags in HTML. Use the free PW Lab online compiler to write codes for web development, data science, programming, and many other projects.

The <h1> tag marks the beginning of the heading tag and the </h1> tag marks the ending of the heading tag. Most of the heading tags use a pair of opening and closing tags.

What are the Attributes in a Basic HTML Page?

The Attributes are used to define the additional information or functions of an HTML tag. They are used to add extra functionality to an HTML tag.

Basic HTML Page: Attributes

<a src=”https://pwskills.com” alt= “Learn with PW Skills” target= “_blank”> Learn with PW Skills </a>

Now, have a look at the table above. The <a> tag defines a hyperlink with opening and closing brackets. The src, alt, and targets are the attributes that decide the nature and destination of the link enclosed within the tag. The link text part will be visible to the users. If you click on the link text, the enclosed link destination will open.

Important Points to Remember on a Basic HTML Page

Always keep in mind some of the major rules while using HTML for web development.

Make sure to start your HTML document with <!DOCTYPE html> and close your HTML document with a </html> tag.
Try to use semantic elements such as <nav>, <header>, <section>, and <footer> tags to make your sections clear.
Make proper use of heading tags based on the importance of the elements.
Most of the HTML tags use openings and closing tags. Some of the tags do not require closing tags, such as <br>, <img>, etc.
Make sure to use tags carefully while using multiple tags.
Use proper indention for better readability and maintainability.
Use comments wisely to explain important sections of your code.
Take care of the device responsiveness and make sure your page adapts to different screen sizes.

Read More: Base HTML: Base Tag in HTML

Basic HTML Page: HTML Editors

After learning the fundamentals of the HTML language, we now need to have proper editors having advanced tools to make our development smooth and easy. There are many editors available on the market. However, make sure to choose the best one out of them.

PW Lab offers a wide range of editing environments based on the requirements and project type.

Choose different works such as big data, data analytics, data science, programming, or web development. You can easily start developing online for free.

How to start using PW Labs for Web Development

Go to @lab.pwskills.com and simply sign in using your Google account to start using the online compiler for coding. The compiler is responsive and can be easily used on any of your devices. Make development fun using PW Lab for faster and more effective development.

Starting with your First HTML Web Page

Now, let us carefully take you through your first coding experience with HTML. First, open your HTML Editor. The page will be completely blank at first. You can use the space to write your HTML code. Let us know the format of an HTML page.

These are different sections of an HTML document. With these tags’ help, we create the structure of our web page. Let us know about them one by one.

<!DOCTYPE html>: Here we declare the type of document and the version of the HTML being used. The latest version of HTML is HTML5.
<html> element: The <html> element is used to enclose the entire HTML document inside. Make sure to close the HTML tag after completing the document.
<head> element: The <head> element is used to contain information not being displayed on the web page such as the title, meta, and links to external resources from the HTML page.
<body> element: It contains the main or visible content of the web page.

Basic HTML Page: <head> Section

The <head> element is used to contain information not being displayed on the web page such as the title, meta, and links to external resources from the HTML page.

Basic HTML Page

<head>

<title> Place your title here</title> // set page title

</head>

Basic HTML Page: <body> Section

The body tag is used to put inside all the contents that will be displayed on the screen. The body tags are used with an opening and closing tag. Let us check a simple HTML body document in the table below.

Basic HTML Page

<!DOCTYPE html>

<head>

initial-scale=1.0″>

<title>Your Page Title</title>

</head>

<body>

<h1>Hello, World!</h1>

<p>This is a simple HTML document.</p>

</body>

</html>

Basic HTML Page: Format of HTML Heading of Web Page

In HTML there are six heading elements used to arrange different elements in the HTML document.

Basic HTML Page

<H1>

<H2>

<H3>

<H4>

<H5>

<H6>

The above table consists of heading elements in increasing order.

Basic HTML Page: How to Add Links in HTML

Candidates can easily add links to an HTML page using the anchor tag <a>. Candidates can also define attributes inside the anchor tag to decide its presentation.

<a src=”https://pwskills.com” alt= “Learn with PW Skills” target= “_blank”> Learn with PW Skills </a>

The anchor age above consists of href, which consists of the link where the destination will be present. Also, candidates can use the target attribute to decide how the link will open, whether in a new window or existing, etc. Candidates can use the alt attribute to use an optional text when hovering on the link.

Recommended Technical Course

Basic HTML Page: List of Important HTML Tags

Check some of the major HTML tools available for development in the table below.

Basic HTML Page: Important Tags
Tag	Description
<!DOCTYPE html>	Defines the document type and version of HTML.
<html>	Root element of an HTML document.
<head>	Contains meta-information about the HTML document.
<title>	Sets the title of the HTML document.
<body>	Contains the content of the HTML document.
<h1> to <h6>	Defines header tags, with <h1> being the largest.
<p>	Defines a paragraph.
<a>	Creates a hyperlink.
<img>	Embeds an image.
<ul>	Defines an unordered (bulleted) list.
<ol>	Defines an ordered (numbered) list.
<li>	Defines a list item in <ul> or <ol>.
<div>	Defines a division or a section in an HTML document.
<span>	Defines an inline container.
<table>	Defines a table.
<tr>	Defines a table row.
<th>	Defines a header cell in a table.
<td>	Defines a data cell in a table.
<form>	Defines an HTML form for user input.
<input>	Defines an input field within a form.
<label>	Defines a label for an <input> element.
<button>	Defines a clickable button.
<select>	Defines a dropdown list.
<option>	Defines an option in a <select> element.
<textarea>	Defines a multiline text input.
<br>	Inserts a line break.
<hr>	Defines a horizontal rule.
<!– … –>	Represents a comment in the HTML code.

Learn Full Stack Web Development With PW Skills

Join our Full Stack Web Development Course to gain mastery in MERN stack web development. The course will teach you about contemporary web development technologies necessary to build and run contemporary web applications.

Aside from professional development and placement assistance, the course offers numerous benefits, like access to the PW Lab, industry-level projects that are relevant to the learning objectives, frequent assessments, a Q&A forum, and a certificate of course completion. Hurry and learn more about the course only at @pwskills.com.

For Latest Tech Related Information, Join Our Official Free Telegram Group : PW Skills Telegram Group