Week 2: Working with HTML – Basics
Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language used to create and
design web pages. It provides the basic structure of a webpage and allows web browsers to
interpret and display content. HTML structures text, images, links, forms, and other elements
in a readable way for users. It acts as the foundation for building all websites and is often used
in conjunction with CSS (Cascading Style Sheets) and JavaScript to enhance a webpage's
design and functionality.
Key features of HTML:
• Markup Language: HTML is a markup language that uses "tags" to define content.
It’s not a programming language, but a way to structure content on the web.
• Web Browser Interpretation: Web browsers interpret HTML code and render it to
display web pages. HTML is the backbone of every webpage and the structure is
represented using various HTML elements and tags.
HTML serves as the skeleton of a website, and web browsers read and display the structure of
these elements accordingly.
Browser-Client Communication
When a user requests a webpage, the browser (client) communicates with the web server to
retrieve the necessary HTML files and other resources (CSS, images, JavaScript). The server
processes the request and sends back a response that contains the HTML document, which is
then interpreted and displayed by the browser.
The communication process works as follows:
1. User Input: The user enters a URL into the browser's address bar.
2. Request to Server: The browser sends an HTTP (Hypertext Transfer Protocol) request
to the web server for the specified page.
3. Server Response: The web server processes the request and returns the HTML file
along with any other necessary resources (images, CSS files, JavaScript).
4. Rendering the Webpage: The browser reads the HTML code, applies CSS for styling,
runs JavaScript for interactivity, and displays the final webpage to the user.
In this communication model, the browser acts as the client that requests the data, and the web
server is where the data is stored and delivered from. Understanding this communication is
crucial for web development and debugging.
Structure of an HTML Document
An HTML document follows a specific structure composed of several important components,
which ensures that the document is readable by web browsers. The structure includes various
tags that help in organizing the content properly.
Basic structure of an HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is an example of an HTML document.</p>
</body>
</html>
• <!DOCTYPE html>: This declaration specifies that the document is written in
HTML5, which is the latest version of HTML.
• <html>: This tag defines the beginning and end of the HTML document.
• <head>: Contains metadata about the document (e.g., title, character set, and external
links to CSS/JavaScript files).
• <meta>: Defines metadata such as character encoding and viewport settings for
responsive design.
• <title>: Specifies the title of the webpage, which appears in the browser's title bar or
tab.
• <body>: Contains the content that will be displayed on the webpage (e.g., text, images,
links, and other elements).
The structure of an HTML document ensures that content is organized in a standard way that
browsers can interpret, allowing proper display on all devices.
Basic HTML Tags and Formatting Text
HTML uses tags to mark up content. Tags are enclosed in angle brackets (< >) and typically
come in pairs: an opening tag and a closing tag. The opening tag starts the element, and the
closing tag ends it. Some tags, like images and line breaks, are self-closing.
Commonly used HTML tags:
• <h1>, <h2>, <h3>, ...: Header tags used for headings. <h1> represents the highest level
of heading, and the number decreases for sub-headings (e.g., <h2>, <h3>).
• <p>: The paragraph tag is used to define blocks of text.
• <a href="URL">: The anchor tag is used to create hyperlinks.
• <img src="image.jpg" alt="Image description">: The image tag is used to insert
images into a webpage.
• <strong>: Defines bold text to emphasize content.
• <em>: Defines italic text, often used to emphasize text.
Formatting Text: HTML provides specific tags for formatting text, making content more
readable and engaging:
• Bold Text: The <strong> tag is used to define bold text. It’s not only for styling but
also indicates emphasis, which is important for accessibility and SEO.
• <strong>This text is bold</strong>
• Italic Text: The <em> tag is used to define italicized text, often for emphasis.
• <em>This text is italicized</em>
• Underlined Text: The <u> tag is used for underlining text.
• <u>This text is underlined</u>
• Strikethrough Text: The <del> tag is used to define text that has been deleted or
crossed out.
• <del>This text is crossed out</del>
These formatting elements allow developers to enhance text presentation and improve the
accessibility and understanding of the content.
Paragraphs, Headings, and Block Elements
HTML allows you to organize content into different sections using blocks and headings, which
help structure the page and improve its readability.
Headings: Headings provide a hierarchical structure to your webpage, with <h1> being the
most important heading, followed by <h2>, <h3>, and so on. Search engines also use these
headings to understand the content's structure, making it important for SEO (Search Engine
Optimization).
• <h1> to <h6> tags are used for headings, with <h1> representing the main heading and
<h2> through <h6> being subheadings.
• <h1>Main Heading</h1>
• <h2>Subheading 1</h2>
• <h3>Subheading 2</h3>
Paragraphs: Paragraphs are the primary way of structuring text content. The <p> tag is used
to define a block of text that forms a paragraph.
• The <p> tag automatically adds spacing before and after the text block, providing
separation between blocks of content.
• <p>This is a paragraph of text in HTML.</p>
Block Elements: Block elements are tags that take up the full width of their container and start
on a new line. These include headings, paragraphs, divs, and lists. These elements are used to
structure content on a webpage.
Common block-level elements:
• <div>: A generic container used for grouping content and applying styles.
• <ul>: Unordered list, used for a list of items with bullet points.
• <ol>: Ordered list, used for a list of items with numbers.
• <li>: List item, used inside <ul> or <ol> to define individual list elements.
Example of a block-level list:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Conclusion
By understanding and working with basic HTML, you can create well-structured webpages
that are readable, accessible, and easy to navigate. The structure of an HTML document, from
the basic tags to organizing content with paragraphs, headings, and block elements, sets the
foundation for more advanced web development. Building on this knowledge, you can
integrate CSS for styling and JavaScript for interactivity to create a dynamic web experience.
