HTML
HTML, or HyperText Markup Language, is the standard language used to define the structure and content of web pages. It tells a browser what information a page contains and how that information is organized.
Headings, paragraphs, images, links, forms, buttons, navigation, lists, and other page elements are represented using HTML. HTML provides the structure that other web technologies build upon.
How HTML Fits Together
HTML → Structure and content
CSS → Presentation and layout
JavaScript → Behavior and interactivityEach technology has a different role. HTML describes what is on the page, CSS controls how it looks, and JavaScript allows the page to respond to user actions and changing information.
How HTML Works
HTML uses elements to describe different types of content. Elements are written using tags, which appear inside angle brackets. Many elements have an opening tag and a closing tag with content between them.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first HTML page.</p>
</body>
</html>When this file is opened in a browser, the browser reads the structure and displays a page containing a title, a heading, and a paragraph.
Elements and Attributes
Elements can include attributes that provide additional information or settings.
<a href="https://example.invalid">Read more</a>
<img src="image.jpg" alt="A description of the image">In the first example, the href attribute identifies where the link should lead. In the second, the src attribute identifies the image file and the alt attribute provides text describing the image.
Attributes help browsers understand how an element should work and can also improve accessibility.
Document Structure
An HTML document is organized as a hierarchy. Elements can contain other elements, allowing a page to be divided into meaningful sections.
<main>
<section>
<h2>About the Project</h2>
<p>Project information goes here.</p>
</section>
</main>This structure makes it easier for browsers, assistive technologies, search systems, and developers to understand the purpose of each part of the page.
Semantic HTML
Semantic elements describe the purpose of content rather than only its visual appearance. Examples include header, nav, main, section, article, and footer.
Using appropriate semantic elements can improve accessibility, make page organization clearer, and help developers maintain the code as a website grows.
Forms and User Input
HTML can also define forms that allow users to enter and submit information.
<form>
<label for="name">Name</label>
<input id="name" name="name" type="text">
<button type="submit">Submit</button>
</form>HTML provides the structure for the form. Additional styling and programming can control how it looks, validate the information, and determine what happens after submission.
HTML in Modern Web Development
HTML forms the foundation of web pages and web applications. Content may be written directly in an HTML file or generated dynamically by other software, but browsers ultimately interpret HTML to display the page structure.
Understanding HTML makes it easier to work with templates, web interfaces, accessibility, styling, and interactive behavior.
Why Learn HTML First?
HTML is often a useful first web technology because its results are easy to see. You can create a document, open it in a browser, make a change, and immediately observe the result.
Learning how pages are structured also makes CSS and JavaScript easier to understand because those technologies operate on the HTML elements that make up the page.
Getting Started
Create a simple HTML document containing headings, paragraphs, lists, links, images, and a form. Open it in a browser and experiment with changing the structure and content.
As your understanding grows, explore semantic elements, accessibility, styling, and interactive behavior. These concepts provide the foundation for creating complete web pages and applications.