Just like humans have a skeleton which give us the base structure of our body websites also have a skeleton like thing which gives them a structure. This skeleton like thing is known as HTML or Hyper Text Markup Language. HTML is markup language used to create webpages. It defines the structure of a webpage in the form of tags and attributes.
HTML Tags -
HTML tags are used to markup contents on a webpage. Tags are enclosed in angel brackets(
<>).Most of the tags come in pair: one opening tag and one closing, for example
<h1>Heading</h1>.Some tags are self closing, for example
<img src=”image.jpg” />The complete set of opening tag, content and closing tag is called element.
HTML Structure-
If we go to VS Code and type !+enter the emmet plugin in HTML generated the basic Boilerplate code for html and we can then start making our changes. A basic structure of the html document is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos provident,
voluptatibus dolore ducimus excepturi eos veritatis quaerat possimus nam!
Facere, non vel. Distinctio soluta iusto tempora labore, ut minima
perspiciatis corporis vero, illo nam sint cupiditate recusandae libero, ex
sit!
</p>
</body>
</html>
Common HTML Tags-
Headings:
<h1>,<h2>, etc., define headings, with<h1>being the most important.Paragraphs:
<p>defines a block of text.Links:
<a href="URL">creates hyperlinks to other pages or resources.Images:
<img src="image.jpg" alt="description" />embeds images.Lists:
<ul>(unordered),<ol>(ordered), and<li>(list item).Tables:
<table>,<tr>,<th>,<td>define tables and table rows/cells.Forms:
<form>,<input>,<button>, etc., create interactive forms.Div & Span:
<div>for block-level sections, and<span>for inline content.
Attributes-
Attributes provides additional information to HTML Tags. Some common attributes are listed below:
class: Used to assign a class for CSS styling.id: Used to identify an element uniquely.href: Used with<a>tags for link URLs.src: Used with<img>to define image sources.alt: Provides alternative text for images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML</title>
<style>
.heading {
color: Red;
}
#section {
background-color: aqua;
}
</style>
</head>
<body>
<h1 class="heading">Heading</h1>
<div id="section">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae quo
iure ullam architecto reiciendis molestias, ut omnis voluptas labore
possimus ducimus perspiciatis voluptatum, impedit eos nihil, consequuntur
necessitatibus cupiditate repellat! Voluptas corporis voluptates eum,
laudantium id nisi voluptatibus itaque.
</div>
<a href="https://www.google.com/">Google</a>
<img src="example.jpg" alt="example" />
</body>
</html>
HTML Comments-
Comments are piece of code that are ignores by the browser. In HTML comments are written as <!-- Comment goes here -→ . The help is documenting code.
HTML5-
The latest version of HTML introduced some new elements such as <section>, <article>, <nav>, <header>, <footer> for better semantic structure and <video>, <audio> for media embedding. Also new form controls like date pickers were also introduced.
Best Practices In Writing HTML-
We should use semantic tags for better accessibility and SEO. Keep our code clean and well documented so that others can read them. Use lowercase letters for tag name and attributes. Keep our code propely nested in the <body> tag.
Conclusion-
HTML is the foundation of web creation, providing the necessary structure for each webpage. Whether you're starting your first website or polishing your abilities, understanding the core HTML elements and how they interact is essential for generating clean, functioning web pages. As you continue to learn about web development, remember that HTML is the first step toward becoming a skilled developer. Keep practicing, exploring, and building—your journey has only just begun!