HTML Basic Tags

Understanding basic HTML tags is important while learning HTML. Here are the HTML elements that are used more frequently than others. They are:

HTML documents

All HTML documents must start with a declaration which specifies the document type: <!DOCTYPE html>.

The HTML document begins with <html> and ends with </html>.

The main part of the HTML document is located between <body> and </body>.

Example of an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>Here is the paragraph.</p>
  </body>
</html>

HTML headings

The heading elements are used for structuring headings.There are six types of HTML headings starting from <h1> to <h6>.

Example of the HTML headings:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>

Result

headings

HTML paragraphs

The <p> element is used for separating HTML paragraphs.

Example of the HTML paragraphs:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Elements example</h2>
    <p>This is some paragraph.</p>
    <p>This is another paragraph <br/> with  line break.</p>
  </body>
</html>

Result

paragraph

HTML images

The attributes of this tag are:

  • the source file (src),
  • the alternative text (alt),
  • width,
  • height.

The <img /> tag is used for inserting HTML images.

Example of the HTML images:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is an image example</h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Result

Image example

The <a> tag is used for inserting HTML links. You can specify the destination of the link with the help of href attribute.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>

Result

Link example

HTML buttons

You can specify the HTML buttons with the <button> tag.

Example of the HTML <button> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the HTML &lt;button&gt; tag:</h1>
    <p>You can specify the HTML buttons with the button tag:</p>
    <button type="button">Button</button>
  </body>
</html>

HTML lists

HTML lists are specified with the <ul> tag that is used for specifying an unordered list, or with the <ol> tag that is used to create an ordered list, followed by <li> tags.

Example of the HTML lists:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>An unordered list</h2>
    <ul>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ul>
    <h2>An ordered list</h2>
    <ol>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ol>
  </body>
</html>

HTML horizontal lines

The HTML <hr> tag breaks the page into different parts and with the help of a horizontal line, which runs from left to right edge of the page, creates horizontal margins. This is an empty tag.

Example of the HTML <hr> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Welcome to W3Docs</h1>
    <hr>
    <p>
      Learn to design and build professional website<br> 
      Learn to design and build professional website 
    </p>
    <p>Learn to design and build a professional website</p>
    <hr>
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <hr>
  </body>
</html>

Practice Your Knowledge

Which of the following is true about HTML based on the content at https://www.w3docs.com/learn-html/html-basic.html?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?