Introduction to HTML
Tags: html
Published: 2022-11-15 16:35:41

Web pages are created using a markup language called HTML. The acronym HTML stands for Hypertext Markup Language. A hypertext link is a link between two web pages. The text document within the tag that defines the structure of web pages is defined using a markup language. This language is used to annotate (add notes to) material so that a computer can comprehend it and modify the content as necessary.

Most markup languages, like HTML, can be read by people. The foundation of HTML pages are HTML components. Images and other objects, like interactive forms, may be embedded within the produced page using HTML techniques. By indicating structural semantics for text elements like headings, paragraphs, lists, links, quotations, and other objects, HTML offers a way to generate structured texts.

By the end of this article, you’ll be familiar with the[ fundamentals](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics) of HTML, the structure of an HTML element, and a few HTML[ tags](https://developer.mozilla.org/en-US/docs/Glossary/Tag).

## The Basics of HTML

Among other options, HTML content may be organized using paragraphs, bulleted lists, graphics, and data tables.

HTML is a markup language that specifies how your material is organized. HTML is made up of a number of[ elements](https://developer.mozilla.org/en-US/docs/Glossary/Element) that you can employ to enclose or wrap certain parts of the content to alter how it appears or behaves. The enclosing[ tags](https://developer.mozilla.org/en-US/docs/Glossary/Tag) can italicize words, make the font bigger or smaller, hyperlink a word or image to another location, and more.

Consider the following line of material as an illustration:

- “I am very smart”


The line might be written inside of paragraph tags if we want it to stand alone:

```
<p>I am very smart</p>
```

### Properties of Attribute-HTML Tags

HTML elements have attributes, which are extra values that customize the components or modify their behavior in different ways to enhance the user experience.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image1_aedefefc7e7310fae26362f289e03939.png"/></figure>

The following should always be present in an attribute:

- A space before the element name (or the previous attribute, if the element already has one or more attributes).
- The name of the characteristic, followed by an equal sign.
- The attribute value enclosed in quotation marks, both first and last.


_Please note that the "id" attribute is a unique identifier in this case, whereas the class attribute, for example, is not._

### Anatomy of an HTML Element

All web pages are constructed using the fundamental building blocks of HTML, which include the doctype declaration, HTML, head, title, and body elements.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image11_c1c7600bf44dc6730be98c4b6bd18369.png" alt="An example of an HTML element."/></figure>

#### <!DOCTYPE html>

The document type declaration appears here (and is not technically a tag). This document is identified as an HTML document. There is no case distinction in the doctype statement.

#### <html>

Sometimes referred to as the root element, the <html> element encloses all of the page's content.

#### <head>

The[ <head>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) element serves as a container for whatever you wish to include on the HTML page, but don’t want to be visible to users. This comprises elements like character set declarations, keywords, and a page description that you want to show up in search results.

#### <title>

The[ <title>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) element determines the title of your page, which is displayed in the browser tab when the page is loaded. It also describes a page when you bookmark or favorite it.

#### <body>

As shown above, the <body> tag includes all of the material that you wish to display to website visitors when they visit your page. This includes text, images, videos, games, playable audio tracks, and other media. To understand this better, click[ here](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics#anatomy_of_an_html_document).

### HTML Tags

A[ tag](https://developer.mozilla.org/en-US/docs/Glossary/Tag) is used to create an element in HTML. Browsers employ the HTML tags to decipher the page's content rather than displaying the tags.

#### HTML Headings

These tags help us to give headings to the content of a webpage. These tags are mainly written inside the body tag. HTML provides us with six heading tags from[ <h1> to <h6>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements). Every tag displays the heading in a different style and font size:

```
<h1>Godwin Chinda</h1>
<h2>Description</h2>
<h3>Skin Colour</h3>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image13_061fc201961c874ca6f777b7832578cb.png" alt="Rendered HTML headings."/></figure>

#### HTML Paragraphs

We can write paragraphs on a webpage with the aid of these tags. They begin with a[ <p>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) tag and terminate with a </p> tag:

```
<p>Godwin Chinda is a Frontend developer.</p>
 
<p>From March, he started developing.</p>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image5_94440cdfd29a0e9048ecd95308093182.png" alt="Rendered HTML paragraphs."/></figure>

#### HTML Horizontal Line

A horizontal line extending from the left to right side of the page is used to create horizontal margins by using the[ <hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr) tag to divide the page into different sections. This tag is mostly empty and accepts few parameters.

#### HTML Images

An image can be added to our website using the[ <img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) tag. The <img src="" alt=""> tag contains the source of the image that is to be inserted.

There are two formats for inserting an image into the image tag:

- If the image is in the same folder, the path only has to include the image's name and format.
- The path, name, and format of the image must all be specified if the image is located in another folder.


### Limitations of HTML

HTML's main drawback is that HTML tags don't explain the significance of the material contained in an HTML text. The layout and instructions for how a browser should render the data contained in these tags are specified by a fixed, preset tag set used by HTML. However, the tags do not transmit the semantics or meaning of the material they contain.

- Dynamic content creation is not possible.
- Its capacity for design is constrained.
- It does not detect or show syntax mistakes.
- No calculations of any kind may be made in it.
- It cannot be used to construct interactive websites.
- The complexity of its code makes it challenging to read and comprehend.


### Semantic Elements

When discussing a piece of code in programming, the term "[semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)" is used to describe its meaning. For instance, "What effect does running that line of JavaScript have?" or "What purpose or role does that HTML element have?"

Let's take a look at some semantic elements below:

#### <article>

The[ HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element known as[ <article>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) denotes a self-contained composition that is meant to be independently distributable or reusable within a document, page, application, or website (e.g., in syndication). Examples include an interactive widget or gadget, a blog entry, a product card, a user-submitted comment, a forum post, a magazine or newspaper story, or any other independent piece of content:

```
<article class="Weather forecast">
 <h1>Weather forecast for New York</h1>
 <h2>14 July 2022</h2>
 <p>Rain.</p>
</article>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image6_e7247458f96c2df118253244163a5d34.png" alt="The rendered HTML code from above."/></figure>

#### <aside>

A section of a document whose content is only loosely related to the page's main content is represented by the[ HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element[ <aside>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside). Sidebars or call-out boxes are common ways to present asides.

```
<aside>
 <p>Godwin Chinda is into Online Streaming.</p>
</aside>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image10_16830fae8907744e2724949431589f0a.png" alt="A rendered HTML paragraph."/></figure>

#### <main>

The primary material of a document's <body> is represented by the HTML element[ <main>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main). The key subject of a document or the primary function of an application is expanded upon or directly related in the main content area.

```
<main>
    <p>Godwin Chinda is a front end developer based in Nigeria.</p>
</main>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image16_b31e842faeb275a91bdf85466c4646ea.png" alt="A paragraph."/></figure>

#### <nav>

An area of a page designated as[ <nav>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) in HTML is a section whose function is to offer navigation links, either within the current document or to other documents. Menus, tables of contents, and indexes are typical navigation sections.

```
<nav>
 <a href="main.html">MAIN</a> |
 <a href="about.html">ABOUT</a> |
</nav>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image8_d960f2ced9d12f2715910c52d14e2c19.gif" alt="Navigating to the main page."/></figure>

#### <a>

With its [href element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#attr-href), the HTML element[ <a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) (or anchor element) generates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else that may be addressed by a URL.

Each <a> should contain text that describes the link's final destination. When focused on the <a> element, pressing the enter key will activate the `href` property if it is present:

```
<a href="https://www.goog.com">Google</a>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image18_6e6e43c6e56eaf3113ed41724006fc60.gif" alt="Clicking through a hyperlink."/></figure>

#### Input Form Elements

In order to construct interactive controls for web-based forms and receive user input, the HTML element[ <input>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) is used:

```
<form action="">
    <label for="message">Enter Message: </label>
    <input type="text">
</form>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image4_1e64356a13c9a1d4ce9f829cf586e053.png" alt="Inputting into a form element."/></figure>

Due to the enormous variety of possible combinations of input types and properties, the <input> element is one of the most potent and complicated of all HTML elements. Input elements include these types:[ button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button),[ checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox),[ color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color),[ date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date),[ email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email),[ file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file),[ hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden),[ image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image),[ month](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month),[ number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number),[ password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password),[ radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio),[ range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range),[ reset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset),[ search](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search),[ submit](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit),[ tel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel),[ text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text),[ time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time),[ url](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url), and[ week](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week).

#### Button

A push[ button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) displays the value of the value attribute, which is empty by default and has no default behavior:

```
<input type="button" value="Button">
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image20_601f3bc6c47b61deea2ab02d8227872f.png" alt="An HTML button."/></figure>

#### Checkbox

A[ checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) enables the selection and deselection of single values:

```
<input type="checkbox" >
<input type="checkbox" >
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image7_4ad2f0b73327019576440a5e6ebc25dc.png" alt="A checkbox."/></figure>

#### Email

This is a space where an[ email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email) address can be changed. Although it provides validation settings and an appropriate keyboard in supporting browsers and devices with dynamic keyboards, it seems to be a text input:

```
<label for="email">Enter your email:</label>
<input type="email">
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image2_259b3853c28a0bde4ba02a541f620bc9.png" alt="An email capture field."/></figure>

#### Password

A[ password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) is a single-line text field with an illegible value. Users will be warned if a site is not secure:

```
<label for="pwd">Password:</label>
<input type="password">
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image19_aba3b682708c6fe70e792e65a6be67de.png" alt="A password input field."/></figure>

#### Submit

This creates a button for form[ submission](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit):

```
<input type="submit">
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image15_fa7b4748dec527b5cc694ab09ab05e7f.png" alt="A submit button."/></figure>

#### Search

This element gives a text box with one line for inputting[ search](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search) terms. Line breaks in the input value are automatically eliminated:

```
<label for="gsearch">Search Google:</label>
<input type="search">
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image3_1d76b78112715eb2e220fa0093d92ee0.png" alt="A search field."/></figure>

### HTML Layout

The area of graphic design known as page layout deals with how visual components are arranged on a page. The site pages look better thanks to page layout. For optimal efficacy or impact, it establishes the overall appearance, relative importance, and relationships between the visual elements to create a seamless flow of information and eye movement.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image12_e71880c525812288b89a40f7fd5ce68d.png" alt="Illustration of the HTML layout."/></figure>

#### Header

The HTML element[ <header>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) designates introductory information, which is often a collection of introductions or navigational tools. It might also have a logo, a search form, the author's name, and other features in addition to some heading components:

```
<header>
 <h1>Main Heading</h1>
 <p>Brought to you by Godwin</p>
</header>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image14_927152574c1b29aa5812eac30cf500df.png" alt="An H1 tag."/></figure>

#### Index/Sidebar

The index/sidebar element is also known as the `<aside>` tag. It is not necessary on a page, and it contains extra information or adverts.

```
<aside>
 <p>The Epcot center.</p>
</aside>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image21_b8f6dbb2119d84448f2bd0b9aef0f029.png" alt="Text rendered in an aside."/></figure>

#### Content Section

The core area where content is presented is known as the content section.  The <main> element is used to add the webpages' primary content:

```
<section>
    <p>
        The area where content is presented is known as the content section.
        The main element is used to add the webpages' primary content.
    </p>
</section>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image17_d07f964b2972a22b758c7422ac5704ba.png" alt="A paragraph rendered in the content section."/></figure>

#### Footer

The footer part of web pages contains the contact details and other pertinent information. The footer is always at the bottom of web pages, and is set by the[ <footer>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) tag:

```
<footer>
 <p>Author: Godwin Chinda</p>
 <p><a href="mailto:godwin@gmail.com">godwin@gmail.com</a></p>
</footer>
```

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image9_1e99b58c1fb6009ee022cf690ddb6334.png" alt="Text rendered in the footer."/></figure>

## Conclusion

In the above article, you’ve learned the fundamentals and anatomy of HTML, as well as the various HTML tags and elements. Gaining knowledge of such ideas can boost your confidence as a developer and make it simpler for you to understand more basic ideas.