Skip to main content

Introduction to HTML

In this article, we explore the fundamental concepts of HTML, covering its syntax, basic elements, attributes, and how it creates the foundation for web development.

What is HTML?​

HTML is a markup language used to create and structure the content of web pages. It consists of a series of elements that define the structure and semantics of content on the web. Each HTML element is represented by tags enclosed in angle brackets (< >), which denote how content should be displayed or treated.

Syntax​

The basic syntax of an HTML element is:

<tagname>Content goes here</tagname>
  • <tagname>: Opening tag that defines the beginning of an element.
  • </tagname>: Closing tag that defines the end of an element.
  • Content goes here: Text, images, or other elements nested within the tags.

Example of a Simple HTML Page​

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>

</body>
</html>

In this example:

  • <!DOCTYPE html>: Declaration that specifies the HTML version.
  • <html>: Root element that wraps the entire HTML content.
  • <head>: Container for metadata and links to external resources.
  • <title>: Sets the title of the web page displayed in the browser tab.
  • <body>: Contains the visible content of the web page.
  • <h1>, <p>: Heading and paragraph elements that structure and display text content.

Basic HTML Elements​

HTML offers a wide range of elements to structure content and provide meaning to web pages. Some of the basic elements include:

  • Text Markup: <h1> to <h6> for headings, <p> for paragraphs, <strong> and <em> for emphasizing text.

  • Lists: <ul> (unordered list), <ol> (ordered list), <li> (list item).

  • Links and Images: <a> for links with href attribute, <img> for images with src and alt attributes.

  • Tables: <table>, <tr> (table row), <th> (table header), <td> (table data).

  • Forms: <form> for creating forms, <input>, <textarea>, <select> for input fields and dropdowns.

Attributes in HTML​

HTML elements can have attributes that provide additional information about an element or modify its behavior. Attributes are defined within the opening tag and typically consist of a name and value pair.

Example of Attributes​

<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="Description">
<input type="text" name="username">
  • href="https://example.com": Attribute of the <a> element specifying the URL it links to.
  • src="image.jpg": Attribute of the <img> element specifying the image file's URL.
  • alt="Description": Attribute of the <img> element providing alternative text for accessibility.

Best Practices for HTML​

  1. Semantic HTML: Use HTML elements that convey the correct meaning and structure of content.

  2. Valid HTML: Ensure HTML code adheres to W3C standards and specifications.

  3. Separation of Concerns: Use CSS for styling and JavaScript for behavior, keeping HTML focused on content structure.

  4. Accessibility: Provide alternative text for images (alt attribute), use semantic elements (<nav>, <header>, <footer>), and ensure keyboard navigation.

  5. Comments: Use comments (<!-- Comment -->) to document code and clarify its purpose for future developers.

Conclusion​

HTML is the foundation of web development, enabling developers to structure content and create interactive experiences on the internet. By mastering the basics of HTML syntax, elements, attributes, and best practices, developers can build well-structured and accessible web pages that meet modern standards and user expectations. Continuously explore advanced HTML features and integrate with CSS and JavaScript to enhance the functionality and aesthetics of your web projects.

Last updated on by Keith Tan