HTML Basics

❮ Prev Next ❯

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

  • the Heading <h1>to <h6> tag
  • The <p> tag
  • The <img> tag
  • The <a> tag
  • The <div> tag
  • The <video> tag
  • The <audio> tag

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

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

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

Example of an HTML document: 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <p>The first paragraph</p>
      </body>
  </html>

HTML Heading Tags

Heading tags are used to define headings or titles for sections of a web page. There are six levels of headings, ranging from <h1> (highest level) to <h6> (lowest level).

Typically a page will have one h1 element, which is the page title. Then you might have one or more h2 elements depending on the page content. (highest level) to <h6> (lowest level).

Headings, especially the heading organization, are also essential for SEO, and search engines use them in various ways.

The browser by default will render the h1 tag bigger, and will make the elements size smaller as the number near h6 increases.

Example of the HTML headings: 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <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>

Heading tags are used to create headings or titles for different sections of a web page. <h1> is typically used for the main heading or title of a page, while <h2>, <h3>, <h4>, <h5>, <h6>, and so on, are used for subheadings or nested sections.

HTML paragraphs Tags

Paragraph tags are used to define paragraphs of text on a web page. They are represented by the <p>, element. For example: 

<p>A paragraph of text</p>

It's a block element.

Inside it, we can add any inline element we like, like span or a.

We cannot add block elements.

We cannot nest a p element into another one.

By default browsers style a paragraph with a margin on top and at the bottom. 16px in Chrome, but the exact value might vary between browsers.

<

Example of the HTML paragraphs: 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Basic Elements example</h1>
        <p>The some paragraph</p>
        <p>This another paragraph</p>
      </body>
  </html>

p tags are used to enclose paragraphs of text, such as articles, descriptions, or explanations. They are used to separate content into distinct paragraphs, making it more organized and readable.

HTML links Tag

Links are used to navigate between web pages or external websites. They are created using the <a> element, with the (href) attribute specifying the URL of the destination. For example:

Example of the HTML links: 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
          <a href="www.codingkoleji.com">codingkoleji.com</a>
      </body>
  </html>

<a> tags are used to create links to other web pages or external websites. The href attribute specifies the URL of the destination page, and the text between the opening and closing tags is the link's display text.

HTML images Tag

The attributes of this tag are:

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

Images are used to display pictures or graphics on a web page. They are inserted using the <img> element, with the (src) attribute specifying the image file's URL.

Example of the HTML images: 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <img src="../../images/course-images/html.jpg" alt="Aleq"  width="200"  height="185">codingkoleji.com</a>
      </body>
  </html>

<img> tags are used to insert images into a web page. The (src) attribute specifies the URL of the image file, and the alt attribute provides a text description of the image, which is displayed if the image fails to load or for accessibility purposes.

HTML lists Tags

Lists are used to create ordered or unordered lists on a web page. They are represented by the <ul> (unordered list) and <ol> (ordered list) elements, with <li> (list item) elements for each item in the list.

Example of the HTML lists 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
      <h1>Oder List</h1>
        <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Apple</li>
          <li>Mango</li>
          <li>Date</li>
        </ul>
        <h1>Unoder List</h1>
        <ol>
          <li>Banana</li>
          <li>Orange</li>
          <li>Apple</li>
          <li>Mango</li>
          <li>Date</li>
        </ol>
      </body>
  </html>

<ul> and <ol> tags are used to create unordered and ordered lists, respectively. <li> tags define each list item. Unordered lists use bullet points, while ordered lists use numbers or letters to indicate the list items.

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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Welcome to Codingkoleji</h1>
        <hr />
        <p>Learn to design and build professional website <br /> with our codingkoleji platform</p>
        <hr />
        <p>Build website with setup of local environment</p>
        <p>All you need is to open our online text editor</p>
      </body>
  </html>

HTML buttons Tag

You can specify the HTML buttons with the <button>

Example of the HTML <button> tag: 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>HTML (button) tag:</h1>
        <p>You can specify the HTML buttons with the button tag:</p>
        <button type="button">Button</button>
      </body>
  </html>

Understanding of the above Basic of HTML will give you insigh to start working with them, eventhough I did not go deep but don't worry we will take them one by one and explain them with examples. let learn about Attributes in the next chapter.

❮ Prev Next ❯