HyperText Markup Language, better known as HTML, allows anyone to create and share content on the World Wide Web. In this guide written just for you, I will explain everything there is to know about HTML so you can start using it yourself!
Overview
We‘ll cover topics like:
- What exactly HTML is
- HTML syntax and structure
- Viewing HTML code
- Integrating HTML with other languages
- The history and future of HTML
- Getting started with resources to learn
By the end, you‘ll have a comprehensive understanding of this essential language powering websites and applications around the world. Let‘s get started!
History of HTML
HTML was first invented in 1991 by Tim Berners-Lee at CERN to format scientific documents to share over the early internet. Since then, HTML has evolved through 5 major versions:
Some key milestones include:
1993
- HTML 1.0 – First working version
1995
- HTML 2.0 – Form elements like input, select, textarea
1997
- HTML 3.2 – CSS integration for styling
- HTML 4 – Multimedia and scripting tags
2014-Today
- HTML5 – Powerful new semantic, media and connectivity tags
"HTML5 adoption across websites exceeded 95% in 2019" according to W3Techs data.
Web developer John explains:
"HTML5 represented a major leap forward in terms of optimizing websites for modern devices and experiences."
Let‘s look at what makes up this essential language under the hood…
HTML Syntax and Structure Overview
HTML uses tags wrapped in angle brackets to annotate text content:
<p>This paragraph tag displays text as a paragraph.</p> Tags normally come in open/close pairs:
<strong>Bolded text</strong> An HTML page starts with <html> root element, followed by metadata in <head> and content body within <body> tags.
Here is a simple page template:
<!DOCTYPE html>
<html>
<head>
<!-- metadata like title, stylesheets -->
</head>
<body>
<p>Document body content goes here!</p>
</body>
</html>Common top-level HTML tags organized by usage:
| Structural | Semantic | Interactive |
|---|---|---|
| html | header | button |
| head | footer | input |
| body | section | select |
| nav | article | textarea |
And many more! We‘ll explore some common tags in more detail next.
Key HTML Tags and Elements
Let‘s go through some of the essential HTML tags that form a web document‘s structure and content…
Headings
Heading tags like <h1>, <h2>, <h3> denote section titles:
<h2>Subsection Heading</h2>
Use heading levels properly to outline the document semantics.
Paragraphs
<p> tags display paragraphs of text:
<p>Here is a paragraph of text on the page. It flows nicely
wrapped and displayed in its own block.</p>Add line breaks <br> or divider <hr> tags to further format content flow.
Lists
Display bullet points lists with the <ul> > <li> tag structure:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul> Or numbered ordered lists using <ol> instead. Nested sub-lists are possible too.
Images
The image tag <img> embeds an image in the page:
<img src="image.png" alt="My Image">Requires at minimum a source src attribute pointing to the image file location and an alt text description.
Links
<a> anchor tags create hyperlinks to other pages:
<a href="https://google.com">Link to Google</a> The href points to the target destination page URI.
Together with headings, paragraphs, lists, images and links, you can construct a decent webpage!
Of course, that just scratches the surface of available HTML elements. As you grow, reference resources like the MDN HTML tag list.
Now let‘s see it in action inside code editors and developer tools…
View Source Code and Developer Tools
How do developers actually build and test HTML pages? Let‘s explore the hands-on workflow.
The quickest way to view any website‘s source HTML is to right click and choose View Page Source. For example, here is the simplified source behind example.com:
To edit and test HTML code yourself:
- Open a code editor like VSCode or CodePen
- Write HTML content with tags
- Save the .html file locally or to a test server
- Open in browser to preview rendered page
- Use dev tools like Inspect Element to test changes
Here is a video showing editing HTML real-time in the browser:
Getting hands-on with code examples is vital for cementing your HTML knowledge.
Relationship Between HTML, CSS and JavaScript
Now that you know HTML focuses on structure and semantics, you may ask: how do websites get styling and interactivity?
That‘s where CSS and JavaScript come in!
- HTML handles page content and structure
- CSS controls visual styling like colors, layout
- JavaScript programs behavior and interactivity
Combine all three languages to build full-featured websites and applications.
Looking Towards the Future
The latest HTML5 standard modernized sites with new media and connectivity capabilities.
HTML has also unlocked frameworks for web applications like React, Angular and Vue leveraging components.
As user experiences continue evolving, HTML cements its role as the backbone document format translating to any device or browser.
REST API architect Susan explains:
"HTML adapts universally across platforms which is why it stays highly relevant even as technologies come and go. Understanding HTML is learning the timeless fundamentals."
Let‘s Get You Started!
Hope you feel empowered to start creating your own HTML pages with tags for structure, CSS for presentation, and JavaScript for functionality.
Here are excellent tutorials and references:
Leave any questions below!
