HTML Code

Updated on 30/01/2025268 Views

Table of Content

In this tutorial on HTML code, I will explore the fundamentals of HTML, explaining its syntax and providing practical examples demonstrating its advantages and versatility. Whether you want to improve your web development skills, start a personal blog, or pursue a career in front-end web development, learning HTML will surely help in all of the avenues.

Setting Up and Getting Started

Before I move on to coding in HTML, let me help you set up your device.

Choosing an HTML code editor

Choose a text editor or integrated development environment (IDE) to write HTML code. Popular options include Visual Studio Code, Sublime Text, Atom, Notepad++, Brackets, and others. Download and install the text editor/IDE of your choice from the official website. You can also choose an online HTML compiler for HTML code running online. This is where you will write your new HTML code.

Create a new HTML file

Open the text editor/IDE you have just downloaded. Then, create a new file and save it with the .html extension, such as index.html, to indicate that it is an HTML file. After this choose a suitable spot on your computer for saving the file.

Start coding

Now you can start coding in HTML in the new file adhering to the format HTML code. The basic format of HTML includes.

Code:

<!DOCTYPE html>
<html>
<head>
(enter content here)
</head>
<body>
(enter content here)
</body>
</html>

Writing content and finishing up

Now, insert the necessary content into the basic format. When the HTML code for website design is complete, save the file and run it on your browser. After you host it, your project is ready to be on the internet.

HTML Code to Style Text

We can also use tags and attributes to change how text looks in HTML. Let me share an example where I have used most of the styles commonly found in HTML code.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> HTML code for Text Styles Example </title>
</head>
<body>
<p> <strong> This text is bold. </strong> </p>
<p> <em> This text is italic. </em> </p>
<p> <u> This text is underlined. </u> </p>
<p> <mark> This text is highlighted. </mark> </p>
<p> <s> This text has a strike-through. </s> </p>
<p> <span style="text-transform: uppercase;"> This text is in uppercase. </span> </p>
<p> <span style="font-variant: small-caps;"> This text is in small caps. </span> </p>
<p> <span style="font-size: 21px;"> This text has a custom font size. </span> </p>
<p> <span style="color: blue;"> This text has a custom font color which is blue. </span> </p>
</body>
</html>

In the above HTML code example, as you can see, different text styles can be achieved easily using different HTML tags and attributes.

The tags used are <strong> for bold, <em> for italic, <mark> for highlight, and <s> for strikethrough. The <u> tag is used in HTML code for underline.

Using inline styles (style="...") within <span> tags allows for direct text transformation, font variety, font size, and font color.

You should keep in mind that CSS is generally suggested for styling HTML elements because it allows for greater flexibility, maintainability, and separation of responsibilities. However, in some circumstances, inline styles can be used to provide quick styling without the requirement for external CSS.

HTML Code for Picture

Nowadays, almost every website has an image. It makes the website more appealing. Let me show you the HTML code for adding image to your website.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Example</title>
</head>
<body>
<img src="https://images.pexels.com/photos/17363613/pexels-photo-17363613/free-photo-of-cat-lying-down-on-floor.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Description of Image"
width="350"
height="400">
</body>
</html>

In the above example, you can replace the link in the src attribute with the exact path or URL for your image file. For example, if your image is in the same directory as your HTML file, you can just use its name. Otherwise, you can link an image hosted on another website directly by using its link. Keep in mind that it takes longer for an image to load if you have a link instead of hosting the picture directly on your own server.

"Description of Image" should be changed with a brief description or alternative text about the image. This text is displayed in case the image fails to load or for accessibility reasons.

HTML Code for Hyperlink

Hyperlinking is the practice of including clickable links or elements in HTML code that allow users to travel between web pages, sections of the same page, or other resources such as websites, emails, or phone numbers.

Let me show you a simple HTML code to explain different types of hyperlinking in HTML.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Types of Hyperlinks example in HTML</title>
<style>
.button {
display: inline-block;
padding: 11px 22px;
background-color: #123acc;
color: #fff;
text-decoration: none;
border-radius: 6px;
}
.button:hover {
background-color: #1234b3;
}
</style>
</head>
<body>
<p><a href="https://www.example.com">Text hyperlink Example in HTML</a></p>

<p><a href="https://www.example.com"><img src="https://images.pexels.com/photos/17363613/pexels-photo-17363613/free-photo-of-cat-lying-down-on-floor.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image Link"
width="100" height="150" /></a></p>

<p><a href="https://www.example.com" class="button">Button Link</a></p>

<p><a href="mailto:info@example.com">Email Link example in HTML</a></p>

<p><a href="tel:+1234567890">Phone Link examplpe in HTML</a></p>

<p><a href="#section-id_1">Anchor Link example in HTML</a></p>

<section id="section-id_1">
<h2>Target Section</h2>
<p>This is the target section for the anchor link.</p>
<p><a href="#">Back to Top</a></p>
</section>
</body>
</html>

In the above example,

There is a text link, an image link, a CSS-styled button link, an email link, a phone link, and an anchor link that takes the user to a specified section of the webpage.
The button-styled link (Button Link) is styled with CSS to look like a button with a blue background color.
The anchor link (Anchor Link) takes you to the part with the ID section-id on the same webpage.
The target section contains a link (Back to Top) that takes you back to the top of the page (href="#").

In this section, let me show an HTML code example for creating a login form using HTML and CSS.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form Example in HTML</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 11px;
margin: 9px 0;
border: 1.5px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
padding: 10px;
margin-top: 10px;
border: none;
border-radius: 4px;
background-color: skyblue;
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<div class="container">
<h2>Login Form Example in HTML</h2>
<form >
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>

In the above example, the portion includes a <style> block with CSS rules for styling the login form and associated elements. The CSS styles define properties for the body, container, input fields, and the submit button, such as font family, width, padding, margin, border, border-radius, background color, and cursor.

There are two input fields (<input type = “text”> and <input type = “password”>) for the username and password, each with its own label (<label>) for better accessibility and user experience. For CSS or JavaScript targeting, the username input has the id attribute "username", and the password input has the id attribute "password". The needed attribute specifies that both fields must be completed before the form can be submitted.

Wrapping Up

HTML code is the foundation of front-end web development, allowing producers to arrange content, add functionality, and create interesting user experiences. It is simple yet useful, making it a necessary skill for anybody interested in web development and who wants to get a job as a code developer or an HTML code tester.

I’d recommend enrolling in a certified course to learn more complex HTML code for websites is better. If the course is from a reputed source, it helps with your CV a lot as well. Check out upGrad. Their courses are in collaboration with some of the best universities around the world. Some of the best professors in this field have curated these courses, making sure you get optimal value out of them.

Frequently Asked Questions

How to write HTML code?

You need to first set up an IDE or a text editor to write code in HTML. Then, you can use the basic structure tags like <!Doctype html>, <html>, <head>, <body>, <meta>, <title>. You can further customize your website according to your needs by adding relevant content.

What is HTML for code?

HTML, which stands for HyperText Markup Language, is a coding language used to construct and structure content on websites. It is made up of tags and components that specify the layout, text, graphics, links, and interactive aspects of a webpage.

What are examples of HTML codes?

Let me show you a basic HTML code example to print Hello World.

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Simple HTML program </title>
</head>
<body>
<p> Hello World </p>
</body>
</html>

How do I start HTML code?

To start HTML code, always start with <!DOCTYPE html> to declare the document type. Then, to start the HTML document, type <html>. Within <html>, use <head> for metadata and <body> for visible content. To add content, use tags like <h1> for headers, <p> for paragraphs, <img> for images, and so on.

Where HTML code is written?

A code in HTML is written using a text editor or integrated development environment (IDE) on a computer.

Who writes HTML code?

Web developers and designers write codes in HTML to build and structure content for websites.

How to insert code in HTML?

To insert code in HTML, we use the <pre> and <code> tags.

How to code HTML on mobile?

To code HTML on mobile you can use a text editor or coding apps for mobiles, like QuickEdit Text Edit for Android and Buffer Editor for iPhones.

Join 10M+ Learners & Transform Your Career

Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.

upGrad Learner Support

Talk to our experts. We are available 7 days a week, 9 AM to 12 AM (midnight)

Indian Nationals

1800 210 2020

Foreign Nationals

+918045604032

Disclaimer

1.The above statistics depend on various factors and individual results may vary. Past performance is no guarantee of future results.

2.The student assumes full responsibility for all expenses associated with visas, travel, & related costs. upGrad does not provide any a.

HTML Code

Setting Up and Getting Started

Choosing an HTML code editor

Create a new HTML file

Start coding

Writing content and finishing up

HTML Code to Style Text

HTML Code for Picture

HTML Code for Hyperlink

HTML Code for Login Form

Wrapping Up

Frequently Asked Questions

upGrad Learner Support

Disclaimer