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

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay