Web Design and DevelopmentTopic 3 of 22

HTML

7 minread

1,272words

Intermediatelevel

HTML (Hypertext Markup Language)

HTML (HyperText Markup Language) is the standard markup language used for creating and designing documents on the World Wide Web. HTML forms the skeleton of web pages, defining the structure of content such as text, images, links, forms, and multimedia elements. It provides a way to describe the page's structure using a series of elements, or "tags", that indicate how content should be displayed or structured.

1. Structure of an HTML Document

An HTML document is structured with a series of nested tags that define the content and layout of a webpage. The essential parts of an HTML document are:

Basic HTML Document Structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

<!DOCTYPE html>: Declares the document type and version of HTML. In this case, it indicates the document is written in HTML5.
<html>: The root element that contains all the content of the web page.
<head>: Contains meta-information about the page like its title, character set, and external file links (like CSS stylesheets).
- <meta>: Provides metadata about the HTML document (e.g., charset, viewport settings).
- <title>: Sets the title of the page, visible in the browser tab.
<body>: Contains the main content of the webpage that is displayed in the browser, such as headings, paragraphs, images, and links.

2. Common HTML Tags

HTML uses a set of predefined tags to describe the content structure of a webpage. Some of the most common HTML tags are:

Headings and Text Formatting

<h1> to <h6>: Define headings, with <h1> being the most important and <h6> the least important.
```
<h1>This is a Main Heading</h1>
<h2>This is a Subheading</h2>
```
<p>: Defines a paragraph.
```
<p>This is a paragraph of text.</p>
```
<strong>: Makes text bold and indicates strong importance.
```
<strong>Important Text</strong>
```
<em>: Makes text italic and indicates emphasis.
```
<em>Emphasized Text</em>
```

Links and Anchors

<a>: Defines a hyperlink that links to another web page or resource.
```
<a href="https://www.example.com">Visit Example Website</a>
```
- href: The attribute that specifies the URL the link points to.

Lists

<ul>: Defines an unordered list (bulleted list).
<ol>: Defines an ordered list (numbered list).

<li>: Defines a list item (used inside <ul> or <ol>).

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Images and Media

<img>: Defines an image. It is a self-closing tag and typically requires the src attribute to specify the image source and alt attribute for an alternative description.
```
<img src="image.jpg" alt="Description of the image">
```

<audio>: Embeds an audio file in a webpage.

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

<video>: Embeds a video file.

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Tables

<table>: Defines a table.
<tr>: Defines a table row.
<td>: Defines a table data cell.

<th>: Defines a table header cell.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
</table>

Forms

Forms are used to collect user input. Key form elements include:

<form>: Defines the form.
<input>: Defines a variety of input fields (e.g., text, password, checkbox).
<label>: Defines a label for an input element.

<textarea>: Defines a multi-line input field (for longer text).

<form action="/submit_form" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

3. HTML Attributes

HTML elements often include attributes, which provide additional information about the element. Attributes are always written in the form of name="value".

id: Specifies a unique identifier for an element (useful for styling and scripting).
```
<div id="container">Content</div>
```
class: Specifies one or more class names for an element, often used for CSS styling.
```
<p class="highlight">This text is highlighted.</p>
```

style: Defines inline CSS styles for an element.

<h1 style="color: blue;">This is a Blue Heading</h1>

src: Specifies the source URL for images, videos, etc.
```
<img src="image.jpg" alt="A sample image">
```

href: Specifies the destination URL for links.

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

alt: Provides an alternative text description for images, essential for accessibility.
```
<img src="logo.png" alt="Company Logo">
```

4. Semantic HTML

Semantic HTML refers to using HTML elements that clearly describe their meaning in a human- and machine-readable way. This is important for accessibility and SEO (Search Engine Optimization).

<header>: Represents introductory content or a navigational section of the page.
<nav>: Defines a section of navigation links.
<article>: Represents a self-contained piece of content.
<section>: Represents a section of a page (can be used for grouping content).
<footer>: Represents the footer of a page or section (usually contains copyright info, links, etc.).
<main>: Represents the main content of the document (unique to HTML5).

Example:

<header>
  <h1>Website Header</h1>
</header>
<main>
  <section>
    <h2>About Us</h2>
    <p>This section contains information about our company.</p>
  </section>
</main>
<footer>
  <p>© 2024 My Website</p>
</footer>

5. HTML5 Features

HTML5 is the latest version of HTML, offering new features and improvements for modern web development. Some key HTML5 features include:

New Semantic Elements: Tags like <section>, <article>, <header>, <footer>, and <nav> for better page structure.
Multimedia Support: Native support for audio and video elements (<audio>, <video>), making it easier to embed media.
Local Storage: Allows web applications to store data on the user's device using localStorage and sessionStorage.
Form Controls: New input types such as email, tel, date, range, and number, which improve form validation and user experience.

6. Conclusion

HTML is the foundation of web development, defining the structure and content of web pages. It provides a set of tags and attributes that organize and present information, allowing web developers to create interactive, accessible, and visually engaging websites. Understanding the basics of HTML is crucial for any web designer or developer, as it serves as the starting point for creating and styling modern web applications.

Past Papers

Open this section to load past papers

Click on Show Past Papers to see past papers.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> </head> <body> <h1>Main Heading</h1> <p>This is a paragraph.</p> </body> </html>

<header> <h1>Website Header</h1> </header> <main> <section> <h2>About Us</h2> <p>This section contains information about our company.</p> </section> </main> <footer> <p>© 2024 My Website</p> </footer>