Learn Main Basic Tags in HTML — with examples

Quick Brief about HTML Tags

  1. <html></html>
  2. <head></head>
  3. <title></title>
  4. <body></body>
  5. <footer></footer>
<html>
<head>
<title>Title here</title>
</head>
<body>
....
</body>
<footer>
....
</footer>
</html>

1. <html></html> — the root element

<html>CONTENT HERE</html>

2. <head></head> — the document head

  1. <meta>
  2. <title>
  3. <script>
  4. <link>
  5. <style>

3. <title></title> — the page title

<title>YOUR PAGE TITLE</title>

4. <body></body> — the page content

<body>
All content goes here
</body>

5. <footer></footer> — the bottom of page

<footer>Copyright 2022. All right reserved</footer>

Other basic tags

1. Heading Tags <h1> … <h6>

<h1> content </h1><h2> content </h2><h3> content </h3><h4> content </h4><h5> content </h5><h6> content </h6>

2. Paragraph tag <p></p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer</p>

3. Anchor tag <a></a>

<a href=”http://www.example.com/">Visit this website</a>

5. Image tag <img>

<img src=”IMAGE_URL” alt=”image” >

6. Container <div></div>

<div id="sidebar">
<h2>Sidebar Heading</h2>
<p>Sidebar paragraph</p>
<p>More sidebar text</p>
</div>

7. Inline container <span></span>

  • Block-level elements, such as div, h1, and p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.
  • Inline elements, such as span, a, and img, are designed to hold smaller pieces of content — such as a few words or a sentence, within a larger block of content. Adding an inline element doesn’t cause a new line to be created.
  • Block-level elements can contain inline elements, but inline elements can’t contain block-level elements.
<p>Hello everyone <span class="some_style">How are you!</span></p><div>Hello everyone <span class="some_style">How are you!</span></div>

8. <!DOCTYPE>

<!DOCTYPE html>
<html>
...
</html>

Bringing it all together — example

<!DOCTYPE html>
<html>
<head>
<title>Portfolio Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Resume for company">
<meta name="keywords" content="skills,projects,org,contact">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>Portfolio</h1>
<div id="mainContent">
<p>Hi, I have great experience in <a href="https://example.com/index.html">Web development</a>, I have worked on many projects</p>
<p> I have responsible career opportunities</p>
<img src="sample.jpg" alt="sample">
</div>
<div id="sidebar">
<h2>Personal Projects</h2>
<p>Having the responsibility to handle all the <span class="product">Frontend activities.</span></p>
</div>
</body>
</html>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Siddharth Rastogi

Siddharth Rastogi

I am a full stack developer, I have an expertise in Web Development. I write tech stuff and share my knowledge with others with the help of articles.