Welcome & Basic Syntax

🌐 HTML Basics Lesson 1 Beginner

HTML (HyperText Markup Language) is the standard markup language used to build webpage structures. It defines the layout structure and holds text contents, leaving styling to CSS and interaction behaviors to JavaScript.

1 Tag Elements and Attributes

HTML uses nested tags to wrap elements: `<tag>Content</tag>`:

Opening & Closing Tags: Most elements specify an opening tag (`<p>`) and a closing tag (`</p>`).
Attributes: Provide extra configuration details inside opening tags: `<a href="url">`.
Self-Closing Tags: Elements containing no contents do not require closing tags (e.g. `<img>`, `<br>`, `<input>`).

2 Writing a Simple HTML Page

Let's look at the basic template structural skeleton of a webpage:

HTML — Page Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to HTML!</h1>
    <p>This is a simple paragraph.</p>
</body>
</html>

Let's define key components:

<!DOCTYPE html>: Preprocessor warning telling the browser the document complies with the modern HTML5 standard.
<html>: The root element encapsulating the entire webpage.
<head>: Contains metadata configurations, page titles, and links to stylesheets, which are invisible to visitors.
<body>: Houses all visible layout content, text, headings, and images.

3 Code Challenge

Challenge: Copy the code block above to a local text file and save it as `index.html`. Open it inside your web browser to view the rendered page.