HTML Post Image

The **&lt;img&gt;** element in HTML let us put images on a page. It is a self closing tag meaning that it does not require a corresponding self closing tag. This is mainly because of the fact that this element is not related to typography and since it is just an extension of typography, content is not needed in this element.

The **&lt;img&gt;** element in HTML is very simple to use. Lets have a look at below example:

```html
<img src="some-image.jpg" alt="An Image">
```

As can be seen from above, the image element takes two at least two attributes to function properly. The **src** attribute and and an **alt** attribute. The **alt** attribute is optional though but it has such a high importance in real world scenario that it will not be wrong to say that it is a mandatory attribute.

The **alt** (short for alternate text) attribute in an **image element** performs two functions. One is that the text inside this attribute is displayed on the screen when the image could not be loaded and the other and most important use-case is that it useful for users who are visually impaired and use some text-to-speech softwares. It is also an important factor in improving the overall website's SEO.

The **src** (short for source) attribute is absolute mandatory. It tells browsers from where and which image should be displayed in a particular **image element**. It can be a relative path from the file system from where the image should be fetched as illustrated in the above example or it can be a url which is illustrated in below example.

```html
<img
  src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-begin-6753651837108462.5-s.png" alt="Google Image">
```

The **image element** also comes with some attributes other than **src** and **alt** attributes. However, it is recommended to always style images through CSS. Two other important could be **width** and **height** attributes which determine the width and height of an image in terms of pixels. Let's have a look at below example.

```html
<img
  src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-begin-6753651837108462.5-s.png"
  alt="Google Image"
  width="100"
  height="100"
>
```

**It is highly recommended to always style images with CSS.**

Images in HTML

There are two types of lists offered by HTML which we can use in or documents. These are ordered lists and unordered lists. Let's have a look at both of these list types in this article.

## Ordered Lists

**Ordered Lists** in HTML are lists in which list items are identified through some numbers or chronological identifiers. However, it is less often that these kinds of lists are used in HTML documents. Let's have a look at the example of how can we create ordered lists in HTML.

```html
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ol>
```

That is the syntax for **ordered lists** in HTML. We start the opening tag, the name of which is **ol** and inside that **ol** element, we need to put our list items using **li** tags.

We can still move further and nest another list inside another. We can have as many nesting as the content demands. Let's have a look the below example for nested list.

```html
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <ol>
    <li>List item 3</li>
    <li>List item 4</li>
  </ol>
</ol>
```

The ordered lists, while these can be completely styled as we want with CSS, comes some attributes which add to their functionality. These properties are listed below:

- **reversed** - This property will set the numbering the list in the descending order. This will not actually change the order each of the list item in descending order but only their numbering is changed.
- **start** - This property will let us define the starting point of the numbering of our list. Let's have a look at the below example which will start from 10.

```html
<ol start="10">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
```

- **type** - This property will let us decide the type of identifier we want to use in numbering our list items. Let's have a look at below examples:

```html


<ol type="1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>



<ol type="a">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>



<ol type="A">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>



<ol type="i">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>



<ol type="I">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
```

## Unordered Lists

**Unordered Lists** in HTML are lists in which list items are identified through some identifiers but these do not depict chronological format of the item. These are commonly used in various websites for various purposes such as for listing blog posts or for creating navigation or for just presenting data in the form of a list.

```html
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>
```

That is the syntax for **unordered lists** in HTML. We start the opening tag, the name of which is **ul** and inside that **ul** element, we need to put our list items using **li** tags.

We can still move further and nest another list inside another. We can have as many nesting as the content demands. Let's have a look the below example for nested list.

```html
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <ul>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
</ul>
```

Though there are some attributes provided by HTML, it is always recommended to use CSS for styling these.

## Conclusion

The key take away from this article are as follows:

- There are two kinds lists that can be used in HTML i.e. **ordered lists** and **unordered lists**.
- In order to create a list, each list item should be nested inside the respective list tags.
- Styling of all forms of lists should be done using CSS.

Lists in HTML

## Basic use of anchor tag.

Have a look at the below syntax which describes the use of anchor tag in its most basic form

```html
<a href="http://www.google.com">Go to Google</a>
```

As can be seen from above code snippet, in order to use hyper-links on a page, we have to use anchor element. The anchor element is just denoted by character **a**. Within the the opening tag of the anchor element, we have to pass an attribute i.e. **href** the value of which would be the relative or exact path to the page to which we want our user to go once the link is clicked.

Usually, relative paths are used when the page where wants to navigate to is located on same sub-domain. In other cases, use of exact path is necessary.

## Attributes of the anchor tag

There are quite a few attributes that we can use in an anchor element each of which will behave in a different manner. We will be discussing some of the very common on most used attributes that we can use this element.

### "href" attribute

The **href** attribute lets a user directs to a page, once the link is clicked, which is assigned to this attribute. In the below example, when user clicks the link, the browser will take user to Google's homepage.

```html
<a href="http://www.google.com">Go to Google</a>
```

It is not necessary that **href** attribute will always link to other pages. Sometimes, we may want to direct a user to a mail box so he / she can send an email, like the below example:

```html
<a href="mailto:name@email.com">Go to Google</a>
```

### "target" attribute

The **target** attribute in an anchor element is also a very commonly used attribute. This attribute can accept one of the four pre-defined values. Each value will result in a different behavior. The **target** attribute is not a substitute for **href** attribute but rather is an extension to **href** attribute. The **target** attribute lets browsers know of the context in which a the link should be opened. Like, on the same page on which link is located or in a new tab or in a new window etc.

With that set, lets have a look at each of the value that can be used for this attribute.

- **\_self** - This the default value of this property. It means that even without the use of **target** attribute, the behavior will be as per specifications of this value. **This value will open the linked document on the same page on which link is located**. The effect of this would be that current page will be replaced by the new page and the link in the browser will also be changed.
- **\_blank** - This value will open the linked page in new tab, usually. However, users can configure browsers to open in the new window. This value is particularly useful when you do not want the user to move away from your site. This way the link will be opened in a new tab and your page will also be present on the users' browser.
- **\_parent** - If someone is running more than one instance of the same browsers in which you website is opened, this will let the user to open the link in the parent instance of that browser meaning that if your site is opened in the third instance which is extracted from the second instance, the link will be opened in the second instance. If that is not the case, then it will behave like **\_self**.
- **\_top** - This will open the link in the top-most instance. If no such instance exists, it will like **\_self**.

With that said, let's have look at syntax for each of the above-mentioned values.

#### \_self

```html
<a href="http://www.google.com" target="_self">Google</a>
```

#### \_blank

```html
<a href="http://www.google.com" target="_blank">Google</a>
```

#### \_parent

```html
<a href="http://www.google.com" target="_parent">Google</a>
```

#### \_top

```html
<a href="http://www.google.com" target="_top">Google</a>
```

Apart from the above there are some other attributes which can be used in anchor element but these are less commonly used and some of them even require a decent understanding of back-end. Hence, for the sake of completeness, these are mentioned below with their brief use-case:

- **hreflang** - it hints the human language of the linked page.
- **download** - it prompts the user the user save the link.
- **rel** - the relationship of the linked page.
- **type** - hints at the linked URL's format with MIME type.

## States in anchor element

There are four states in an anchor tag which are described below:

- **hovered** - It is the state when cursor is over over the hyper-link. As a result you will be able to see the location where the hyper-link points to at the bottom left of the web page.
- **visited** - It is state with which a user can point out whether he / she has already visited the particular link. The default colour of the link is _blue_ and in this state, it turn to _purple_.
- **active** - This is the state when a user clicks the link but has not yet released the mouse button. In this state, the colour of the link will be changed to _red_. However, it will be a temporary state meaning as soon as the button is released, the red colour will go away.
- **link** - This is the default state of the link when it was never clicked before. Its colour will be _blue_ in this state.

We can style the styling of all of the above link states through the use of CSS.

## Conclusion

The key take away from this article are as follows:

- Links are used to link to different pages on the same website or different pages of a different website.
- The location to which the link should be pointed at is defined in **href** attribute.
- We can change the location where the link should open in the browser through the use of **target** attribute.
- Links have four states _link_, _visited_, _hovered_, and _active_, each of which can be targeted separately in CSS and styled as such.
- Links are useful for implementing navigation in a website.

Anchor Tag in HTML

Whenever one wants to write regular content on a page, the best element available in HTML is the **p tag**. This element is a block level element.

## The "p" element

Before explaining anything about this element, have a look at the below example.

```html
<p>This is paragraph written under p tag og HTML.</p>
```

The **p** element signifies the regular text on the web page. it is a block level element which means that this element takes up whole line width from left most to the right most of the screen no matter the content ends in the middle of the line. This means that any new element that one would write subsequent to this element will appear on the new line. Similarly, this element, itself, also always starts with a new line unless, it is styled otherwise.

The syntax as can be seen from above quite simple. One just has to write an opening tag i.e. **&lt;p&gt;**, write some content and then close the tag with a closing tag i.e. **&lt;/p&gt;**.

### Whitespace in "p" tag

When writing content inside a **p** element, the browser, by default removes any leading spaces from the start and end of the tag. It can best seen from the example below:

```html
<p>            This is a paragraph with leading spaces.           </p>
```

The output of the above line will not result in spaces from the start and end of the content but rather it will start from the left most of the element.

Further, if one puts more than one space between two characters / words, the browser will also remove all of the additional spaces except for one space. The below code will simply have one space between each character no matter how many spaces are entered in the code.

```html
<p>This     is    a             paragraph        with       leading    spaces.</p>
```

### Line-breaks in "p" tag

When writing content inside a **p** element, the browser, by default removes any line-breaks and replace them with a single space between the characters where line breaks were entered. It can best seen from the example below:

```html
<p>This
  is
  a
  paragraph
  with
  line
  breaks.</p>
```

The output of the above line will not result in line-breaks after each word where line-breaks were entered but rather, entire text will be shown on a single line with one space between characters where line breaks were entered.

To make browsers accept above line breaks, a different tag is used i.e. **pre** which will explained in some later article.

## Conclusion

The points to remember mentioned in this post are as follows:

- Whenever, one wants to display some regular content on a web page, use the **p** tag.
- The paragraph element is a block-level element meaning it takes the entire row space on a page.
- Whitespace and line-breaks are not taken into account by browsers. Rather, only one space between the two characters is accepted and displayed.
- Leading spaces at the beginning or at the end of content in the p tag are not completely removed by browsers.

Typography in HTML (Paragraphs)

## Headings in HTML
There are six levels of headings in HTML ranging from level 1 heading to level 6 heading. A particular page should ideally have only one level one heading which would specify the page title. Below are few basic examples:

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

Typography in HTML (Headings)

Before starting, let's have a look at the below the example which is a valid HTML document. If one saves this document, using a text editor with _.html_ file extension and open the same in the browser, the it would show heading with the text of "This is the heading" and a paragraph with the text of "This is the paragraph". Moreover, the tab content will also show the text of "My Site".

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>This is the heading</h1>
    <p>This is the paragraph.</p>
  </body>
</html>
```

## Breaking the example into simple pieces

In order to understand the examples presented above, let's look at the example line by line.

### "!DOCTYPE" html

The **!DOCTYPE html** declaration simple specifies and tells the browser that this document is written using HTML 5. HTML, since its first release in 1993, has some other versions as well but the HTML 5 version is the latest version and is the market standard at the current point of time.

If one wants to write HTML in some other version, which is definitely not recommended, one can use that version specific declaration at the top of the document.

### "html" tag

The **html** tag or element is master element of a web page. It is the root of a web page and all elements have to be nested inside this html element.

### "head" tag

The **head** tag or element contains all the meta-information about the web page. This meta-information is the information about the page that does not need to displayed in the browser. However, information or elements inside this tag are certain other purposes, like for SEO, linking to other external files such as stylesheets etc.

#### "title" tag

The **title** tag / element specifies the title of a web page which appears in the browser's tab.

### "body" tag

The **body** tag or element contains all the information which one wants to show to the readers of the web page. These may include text content and images. In short, this tag helps show human readable content on a web page.

#### "h1" tag

The **h1** tag or element specifies a certain piece of text that is written inside this tag, as level 1 heading text and displays that as such. There are six levels of headings in HTML starting from _h1_ until _h6_.

#### "p" tag

The **p** tag or element specifies the regular text on a web page. This element identifies a piece of text written inside this tag as paragraph element.

## Conclusion

The points to remember mentioned in this post are as follows:

- The "&lt;!DOCTYPE html&gt;" declaration defines that this document is an HTML5 document.
- The "&lt;html&gt;" element is the root element of an HTML page and both "head" and "body" elements are to come inside this element.
- The "&lt;head&gt;" element contains meta information about the HTML page which is not visible to readers of a web page.
- The "&lt;title&gt;" element specifies a title for the HTML page which is shown in the browser's tab.
- The "&lt;body&gt;" element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images etc.
- The "&lt;h1&gt;" element defines a level 1 heading. There are six levels of headings available in HTML.
- The "&lt;p&gt;" element defines a paragraph which means it is a regular text.

A Simple HTML Document

First and foremost, it is important to take a note to the point that **HTML is a markup language** and **it is not considered a proper programming language**. This is because it was not designed for programming purpose back in the day. HTML was developed and released with the sole of premise of communicating over the internet in some form of standard document theme.

Suppose, one wants to share a document on a particular website which is hosted somewhere on the globe and that person writes that document in Microsoft Word but the user who will reads the document uses a browser which can properly render a web page which is written in notepad. In this case, that particular page is likely to not get rendered properly on the user's system. To counter this very problem, the advent of HTML and the whole concept of standardisation of web document came into place.

## How to install HTML?

HTML is something that comes packed with browsers by default and **it does not need to get separately installed** on the system. The thing one needs to get installed is the web browser which is the environment in which HTML gets rendered. Whatever operating system one is using, the operating system also comes with some default browser like edge for Windows, safari for Mac etc.

## How one can write HTML?

It is very easy to write HTML documents on your computer. The most simplistic way is to just open the notepad on your system and write some HTML inside that document. Once done with writing the HTML, save that particular file with **.html** extension. By default, your operating system will open that file in the default browser.

That was quite simple. However, how one can know how and write in that particular document?

### How to write basic HTML pages?

In order to write very basic HTML documents, one must understand the concept of a **markup**. **Markup** is a very old technique usually associated with content writing and publication in which editors, while reviewing the content, specify, through the use of some symbols or explicit text, what content should be presented in what form in a particular document. This way, the document will have some visual hierarchy in the readers' minds.

To further elaborate the above statement, the **markup** is a technique in which it is specified in the document how to present parts of text that will look distinguished and logical in readers' minds. Like, what should be the main heading of the page, what should be the regular text, what should be secondary headings, what should be the regular bold or italic text and etc, etc. When this concept is taken into the computer environment, this markup is called **markup language**.

### How can we set markup in HTML documents?

In order to define markup in an HTML document, all we have to do is to wrap whatever content you have inside the pre-defined tags. Consider them as identifiers where we tell computer / browsers about what piece of content is a heading, what is a paragraph and etc. When a piece on content is wrapped around with certain particular tag, in HTML that portion is known as an **HTML element** like a heading element or a paragraph element etc.

It can be established from the above that in order to markup documents in computer, one has to utilise the power of markup language i.e. HTML _(if the purpose is mainly to write pages for web browsers)_. In order to use HTML, one needs to write content in inside some pre-defined tags which will ultimately result in a particular HTML element ("element"). Let's have a look at below examples of using tags which will result in an element.

#### In order to write some heading on a page,

```html
<h1>This is a heading element which is wrapped around heading tags</h1>
```

#### In order to write some paragraphs on a page,

```html
<p>This is a paragraph element which is wrapped around paragraph tags</p>
```

As can be seen from the above examples, in every element, there is an opening tag and a closing tag. The difference between the two simply **"/" - forward slash** just before the name of the closing tag. Further, each element's tag **starts with a less that sign or opening angle bracket** and **closes with a greater that sign or closing angle bracket** and inside the those brackets, is the particular name of the tag, except that in the case of closing tag that name is followed by the forward slash.

However, contrary to above, one might want to show some non-typography data on a particular document like images. In that case, the element usually does consist of an opening and a closing tag but rather a self-closing tag. Have a look at the below example:

```html
<img src="http://www.someurl.com" alt="Alternative Text" />
```

## Conclusion

The points to remember mentioned in this post are as follows:

- HTML stands for Hyper-Text Markup Language.
- It is the standard markup language understandable by browsers to render human-readable content on web pages.
- HTML documents need to be saved with **.html** extension at the end of a file name.
- HTML document consists of various HTML elements.
- Each HTML element consists of an opening and a closing tag and the content is written in between those tags.
- HTML tags that are not related to typography are usually self-closing tags.