DEV Community

Kavya Gupta
Kavya Gupta

Posted on • Edited on

3 1

"Getting Started with HTML : A Beginner's Guide"

HTML(Hypertext Markup Language) is a backbone of the web. It's used to structure content on the web and learning, it is the first step of your web development journey.

What is HTML?
HTML is the markup language for creating web pages. It uses elements, tags, attributes to define the structure of your content.
-> HTML code always between html element and html
element contain Head and Body elements.
-> Head is used for Meta Data.
-> Body is used for actual content.

Here is an example of a simple HTML document:

<!DOCKTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello</h1>
    <p> This is a paragraph</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here are some commonly used HTML elements

Headings#

-> Headings are used to make any text as important and each
heading held its respective importance.
-> There are 6 headings possible in HTML <h1> to
<h6>.
-> h1 is biggest one and h6 is least one.

 <h1>This is heading</h1>
Enter fullscreen mode Exit fullscreen mode

Paragraphs#

-> Use the <p> tag for the text content.

<p> This is paragraph </p>
Enter fullscreen mode Exit fullscreen mode

Links or Hyperlinks#

-> Hyperlinks or links are used to navigate the user into
different address or references.
-> For creating hyperlinks we use anchor tag <a>.

<a href="https://www.google.com" target="_blank"></a>
Enter fullscreen mode Exit fullscreen mode

Images#

-> Images are used for visual creatives in web page.
-> <img> tag is used to display images in web page.

<img src="https://example.com/image.jpg" 
   alt="Description Text">
Enter fullscreen mode Exit fullscreen mode

Formatting tags#

-> Formatting tags are used to format the text such
as bold, italic etc.
-> HTML formatting tags:

  1. <b> - Bold text
  2. <strong> - Important text
  3. <i> - Italic text
  4. <em> - Emphasized text
  5. <mark> - Marked text
  6. <small> - Smaller text
  7. <del> - Deleted text
  8. <ins> - Inserted text
  9. <sub> - Subscript text
  10. <sup> - Superscript text.

Links

-> Lists are used to list out certain items either ordered or
unordered.
-> In HTML , lists are classified into 3 types:

Ordered List

-> An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

<ol>
  <li>Bike</li>
  <li>Car</li>
  <li>Bus</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Unordered List#

-> An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

<ul>
  <li>Pen</li>
  <li>Box</li>
  <li>Pencil</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Definition List

-> A Definition list is a list of terms, with a definition of each term.
-> The <dl> tag defines the definition list, the <dt> tag defines the term (name), and the <dd>tag describes each term:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more