HTML

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It defines the structure and content of web documents by using a combination of tags and attributes.

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for Hyper Text Markup Language.

Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.

A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.

What Are HTML Tags?

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.

Most tags must be opened <h1> and closed </h1> in order to function.

What are HTML Attributes?

Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.

An example of an attribute is:

In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.

Golden Rules To Remember

The vast majority of tags must be opened (<tag>) and closed (</tag>) with the element information such as a title or text resting between the tags.
When using multiple tags, the tags must be closed in the order in which they were opened. For example:

<strong><em>This is really important!</em></strong>

Basic Construction of an HTML Page

These tags should be placed underneath each other at the top of every HTML page that you create.

<!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the language is HTML 5.

<html> — This tag signals that from here on we are going to write in HTML code.

<head> — This is where all the metadata for the page goes — stuff mostly meant for search engines and other computer programs.

<body> — This is where the content of the page goes.

Further Tags

Inside the <head> tag, there is one tag that is always included: <title>, but there are others that are just as important:

<title>

This is where we insert the page name as it will appear at the top of the browser window or tab.

<meta>

This is where information about the document is stored: character encoding, name (page context), description.

Code:

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Heading</h1>

<p>Paragraph</p>

</body>

</html>

Output:

How to Add HTML Headings To Your Web Page

In HTML, headings are written in the following elements:

<h1>
- <h2>
  - <h3>
    - <h4>
      - <h5>
        <h6>

As you might have guessed <h1> and <h2> should be used for the most important titles, while the remaining tags should be used for sub-headings and less important text.

Search engine bots use this order when deciphering which information is most important on a page.

Code:

<html>

<head>

<title>Headings Example</title>

</head>

<body>

<h1>This is a Heading level 1</h1>

<h2>This is a Heading level 2</h2>

<h3>This is a Heading level 3</h3>

<h4>This is a Heading level 4</h4>

<h5>This is a Heading level 5</h5>

<h6>This is a Heading level 6</h6>

</body>

</html>

Output:

How To Add Text In HTML

Adding text to our HTML page is simple using an element opened with the tag <p> which creates a new paragraph. We place all of our regular text inside the element <p>.

When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way.

Other Key Elements

They are as follows:

Code:

<!DOCTYPE html>

<head>

<title>HTML Example</title>

</head>

<body>

<p>This is a <b>paragraph</b> with some <strong>strong text</strong>.</p>

<p>It also includes <i>italicized text</i> and <em>emphasized text</em>.</p>

<p>You can <mark>highlight</mark> important parts of the text.</p>

<p><small>This text is in a smaller font size.</small></p>

<p><strike>This text has a strikethrough</strike> and <u>underlined text</u>.</p>

<p><ins>This is inserted text</ins> and <sub>subscript</sub> and <sup>superscript</sup> text.</p>

</body>

</html>

Output:

The A Tag

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

Basic Link

A simple hyperlink that navigates to another page.

<a href="https://www.example.com">Visit Example</a>

Open Link in a New Tab

Use the target="_blank" attribute to open the link in a new tab or window.

<a href="https://www.example.com" target="_blank">Visit Example</a>

Link with Tooltip

Use the title attribute to provide additional information that appears as a tooltip when the user hovers over the link.

<a href="https://www.example.com" title="Go to Example">Visit Example</a>

Link to a Section Within the Same Page

Create a link that navigates to a specific section of the same page using an ID.

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>

<p>This is Section 1.</p>

Download Link

Use the download attribute to prompt the user to download the linked file rather than navigating to it.

html

Copy code

<a href="path/to/file.zip" download>Download File</a>

Email Link

Create a link that opens the user's default email client with a pre-filled email address.

<a href="mailto:[email protected]">Send Email</a>

Phone Link

Create a link that opens the phone dialer on mobile devices with the pre-filled phone number.

Link with Relative URL

Navigate to another page within the same website using a relative URL.

<a href="about.html">About Us</a>

Exercise:

Scenario: Building a Personal Blog

Imagine you've decided to start your own personal blog to share your thoughts and experiences. You want to create a simple HTML document to showcase your first blog post. Use the following scenario to answer the questions:

Title and Introduction:
- Create an <h1> tag for the title of your blog post. Choose a title that reflects the content you're writing about.
- Write a short introductory paragraph about the purpose of your blog using the <p> tag.
Content Sections:
- Divide your blog post into two sections using <h2> tags. Choose headings that represent the main topics you're discussing in your post.
- In each section, include a paragraph of text using the <p> tag to provide more details about the topics.
Emphasizing Points:
- Emphasize one or two important sentences in each section using the <em> tag.
Conclusion:
- Summarize your blog post with a concluding paragraph. Use an <h3> tag for the heading of this conclusion.

Your HTML document should reflect the structure and content of a basic blog post.

Page updated

Google Sites

Report abuse