General and Web Programming Fundamentals
  • Introduction
  • Program creation and design
    • Program design
      • Algorithms
      • Pseudocode
    • Programming conventions
    • Writing programs
      • Source code editors
      • Integrated Development Environments
      • Code repositories/Version control
      • Compilers/Interpreters
  • Programming Fundamentals
    • Operators
      • Arithmetic
      • Logical
      • Assignment
    • Constants and Variables
    • Datatypes
      • Primitive Datatypes
        • Character
        • Integer
        • Boolean
        • Floating point
        • Nothing (Null)
      • Composite Datatypes
        • Arrays
        • Strings
        • Classes
        • Structs
      • Literals
    • Data structures
      • Lists
      • Queues
      • Stacks
      • Map/dictionary
      • Trees
      • Graphs
    • Control structures
      • Selection (Conditional)
        • If/Else
        • Ternary
        • Switch
      • Iteration (Loops)
        • For loops
        • While loops
        • Do-While loops
        • For-Each loops
    • Functions
      • Parameters and arguments
      • Lambda expressions
      • Higher Order Functions
    • Space and Time
    • Scope
    • Standard libraries
  • Programming Paradigms
    • Procedural (Imperative) Programming
    • Object-oriented programming
    • Functional Programming
    • Declarative Programming
    • Event Driven programming
  • Programming Languages
    • Short history of programming
    • Low-level programming languages
    • High-level programming languages
  • Web Development
    • What is the web?
      • Web browsers (clients)
      • Webservers (serving web pages)
      • W3C
    • Markup languages
      • HTML
        • HTML Tags
      • Cascading Style Sheets (CSS)
        • CSS Properties
      • XML
      • Markdown
    • Scripting Languages
      • JavaScript
      • TypeScript
    • JSON
    • JavaScript Frameworks
  • Acknowledgements
    • About the author(s)
  • License
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Web Development
  2. Markup languages

HTML

HTML, or HyperText Markup Language, is the standard markup language used to create and design web pages. It provides the structure of a webpage, allowing web browsers to interpret and display the content properly. HTML uses tags to define elements, such as paragraphs, headings, links, images, and other content, enabling the creation of visually engaging and functional websites.

HTML documents are plain text files that end with a .html or .htm extension. They can be created using a simple text editor or more sophisticated web development tools. Notably, HTML works in conjunction with CSS (Cascading Style Sheets) and JavaScript to create dynamic and stylish web pages.

Here is an example of a simple, W3C compliant HTML web page displaying "Hello World":

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

HTML Tag Syntax

HTML tags are the building blocks of an HTML document. Each tag provides specific information about how the content should be structured or displayed in a web browser. Understanding the syntax of HTML tags is crucial for creating functional and aesthetically pleasing web pages.

Opening and Closing Tags

HTML tags typically come in pairs, comprising an opening tag and a closing tag.

  • Opening Tag: Marks the beginning of an element. It consists of the tag name enclosed within angle brackets (< >). For example, <p> is the opening tag for a paragraph.

  • Closing Tag: Marks the end of an element. It is similar to the opening tag but includes a forward slash (/) before the tag name. For example, </p> is the closing tag for a paragraph.

Example:

<p>This is a paragraph.</p>

Self-Closing Tags

Some HTML tags do not have closing tags and are referred to as self-closing or void tags. These tags often embed or import other types of content into the document, such as images or input fields.

Example:

<img src="image.jpg" alt="An example image">
<br>

Nested Tags

HTML elements can be nested within each other. This means you can place one element inside another to create complex web page structures. It's important to ensure that the tags are properly nested and closed in the correct order.

Example:

<div>
  <p>This paragraph is inside a div element.</p>
</div>

Attributes

HTML tags can have attributes that provide additional information about an element. Attributes are placed within the opening tag, and they consist of an attribute name and a value, with the value enclosed in double quotes.

Common attributes include:

  • id: Specifies a unique id for an element.

  • class: Specifies one or more class names for an element.

  • src: Specifies the source of an image.

  • alt: Provides alternative text for an image.

Example:

<img src="logo.png" alt="Company Logo" id="logo" class="responsive">

Understanding these fundamental aspects of HTML tag syntax will help you effectively structure and style your web pages.

PreviousMarkup languagesNextHTML Tags

Last updated 1 year ago

Was this helpful?