cover image for Introduction to HTML

Introduction to HTML

R

Introduction to HTML basics

HTML, or Hypertext Markup Language, is the standard markup language used to create web pages. It is used to structure content on the web in terms of text, links, images, and other elements. HTML is a fundamental technology, alongside CSS and JavaScript, for the production of websites.

HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. These elements are represented by tags. Here's a simple example of HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<a href="http://www.example.com">This is a link</a>
<img src="image.jpg" alt="My Image">
</body>
</html>

Here's what the tags mean:

  • <!DOCTYPE html>: This declaration defines the document to be HTML5.
  • <html>: The root element of an HTML page.
  • <head>: The element contains meta-information about the document, including the title.
  • <title>: Specifies the title of the page. The title is displayed in the browser's title bar or tab.
  • <body>: Contains the content shown to web users when they visit your page. This can include text, images, audio, video, and more.
  • <h1>: This is a heading tag. HTML uses six levels of heading tags, from <h1> to <h6>.
  • <p>: Defines a paragraph.
  • <a>: 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.
  • <img>: Used to embed an image in the webpage. The src attribute specifies the path to the image file.

HTML is essential for web development because it is responsible for the structure and content of the website. It is the skeleton that gives every webpage structure. With HTML, you can create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. CSS and JavaScript, then, are used to style and add interactive functionality to these documents respectively.

In summary, HTML is a cornerstone technology for the web, and understanding it is fundamental to web development.

HTML Structure

Let's delve deeper into the structure of an HTML document.

HTML documents, also known as web pages, are text files marked up with HTML tags. Each HTML tag describes a certain kind of content on the page. The basic structure of an HTML document is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
<!-- Body content goes here -->
</body>
</html>

Here's a more detailed explanation of each part of the structure:

  1. <!DOCTYPE html>: This is the doctype declaration, and it must be the very first thing in an HTML document, before the <html> element. It is an instruction to the web browser about what version of HTML the page is written in. In this case, it is HTML5.

  2. <html>: This is the root element of an HTML page. All other tags (except the <!DOCTYPE html> tag) must come inside the opening <html> and closing </html> tags.

  3. <head>: The head element contains meta-information about the HTML document, including its title and link to any CSS (Cascading Style Sheet) files. The head is a container for all the head elements, which can include script tags, style tags, meta information, links, and more. Elements inside the <head> tag are not displayed in the browser.

  4. <title>: This tag specifies the title of the web page. The title is displayed in the browser's title bar or tab. It's also used when bookmarking the page and in search engine results.

  5. <body>: The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. It's the part of the HTML document that is rendered in the web browser.

Within the <body> tag, you might see tags like:

  • <h1> to <h6>: These are heading tags, with <h1> as the highest (or most important) level and <h6> as the lowest.

  • <p>: This tag defines a paragraph. Any text within the opening <p> and closing </p> tags will be displayed as a paragraph.

  • <a>: The anchor tag is used to create hyperlinks.

  • <img>: This tag is used to embed images.

  • <ul> and <li>: These tags are used to create unordered (bulleted) lists.

  • <div>: The division tag is used as a container that divides the HTML document into sections. It is often used with CSS to style these sections.

  • <span>: This tag is used for grouping and applying styles to inline elements.

These are just a few examples. There are many more HTML tags available to structure and format content on a web page. Remember, each HTML element can also contain attributes that define extra information about the element, such as classes, IDs, styles, or data values.

Create a basic HTML document

Creating a basic HTML document involves using various HTML tags in a structured manner. Here's a step-by-step guide:

  1. Create a new file: Create a new file using a text editor like Notepad (Windows), TextEdit (Mac), or a specialized code editor like Visual Studio Code or Sublime Text. Save this file with a .html extension. For example, you might name it index.html.

  2. Add the doctype declaration: At the top of your HTML file, add <!DOCTYPE html> to declare that your document is an HTML5 document.

  3. Start and end with the html tag: After the doctype, add the opening <html> tag. The closing </html> tag should be at the very end of the document.

  4. Add the head section: The head section contains meta-information about the HTML document. After the opening <html> tag, add <head>...</head>. The contents of the head are not displayed on the web page.

  5. Add a title: Inside the head section, add a title for your page with the title tag, like so: <title>Your Page Title</title>.

  6. Add the body section: The body section contains the content of the document. After the closing </head> tag, add <body>...</body>.

  7. Add content to the body: Inside the body, you can add headings, paragraphs, links, images, etc., using various HTML tags.

Here's an example of a very basic HTML document:

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My First HTML Page</h1>
<p>This is a paragraph. It's where most of your content goes.</p>
</body>
</html>

To view this webpage, just navigate to where you saved the .html file on your computer and double-click on it. This will open the webpage in your default web browser.

Keep in mind that this is a very basic HTML document. A typical web page will contain many more tags and content!

Use HTML tags to add headings, paragraphs, and lists

To create a simple HTML document with headings, paragraphs, and lists, you'll need to use a few basic HTML tags. Here's an example:

<!DOCTYPE html>
<html>
<head>
    <title>My HTML Document</title>
</head>
<body>
<h1>Heading 1</h1>
<p>This is a paragraph. Paragraphs are blocks of text that are often used to group related sentences and ideas
    together.</p>

<h2>Heading 2</h2>
<p>Here's another paragraph. You can have as many paragraphs as you like!</p>

<h3>Heading 3</h3>
<p>And yet another paragraph. Notice how the headings are getting smaller?</p>

<h1>A List Example</h1>
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

<h1>An Ordered List Example</h1>
<ol>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
</ol>
</body>
</html>

Here's what each of these tags means:

  • <html>: This tag denotes the start of an HTML document.
  • <head>: The head tag contains metadata about the HTML document, including the title.
  • <title>: This tag specifies the title of the HTML document. The title is displayed in the browser tab.
  • <body>: This tag contains the main content of the HTML document.
  • <h1>, <h2>, <h3> etc.: These tags are used for headings. The number denotes the level of the heading; <h1> is the highest (and usually largest and most important) level, and the numbers go up to <h6>.
  • <p>: This tag is used to denote paragraphs.
  • <ul>: This tag creates an unordered list (a bulleted list).
  • <ol>: This tag creates an ordered list (a numbered list).
  • <li>: This tag is used for individual list items within <ul> or <ol> tags.