Intro to HTML
A quick introduction to the framework of the web.
HTML, or HyperText Markup Language, is the standard language for creating web pages. It structures content on the web using elements that browsers interpret to display text, images, links, and other multimedia. This guide provides an introduction to HTML with examples of the components and elements you need to know to use HTML.
As you go through the guide, it is recommended you use an IDE like VSCode or an online editor to play around with the examples.
What is HTML?
HTML, or HyperText Markup Language, is the foundation of web development. It is used to describe the structure of web pages using markup. HTML elements are the building blocks of HTML pages. These elements are represented by tags, written within angle brackets, such as <html>, <body>, <h1>, etc. Browsers do not display the HTML tags but use them to render the content of the page.
HTML is different from CSS and JavaScript, each serving a unique role in web development. HTML is responsible for creating the structure of a web page. It defines the layout and organization of content, such as headings, paragraphs, links, images, and other multimedia elements. On the other hand, CSS, or Cascading Style Sheets, is used to style and design the HTML content. It controls the appearance of the web page, including layout, colors, fonts, and other visual aspects. Finally, JavaScript is used to enhance the interactivity of a web page. It allows for dynamic content, user interactions, and various web functionalities, such as form validations, animations, and API calls. JavaScript makes web pages more engaging and interactive for users.
Image Credits: Kinsta
Basic Structure of an HTML Document
An HTML document has a basic structure that includes a declaration, a head, and a body. Here is a simple example of an HTML document:
<!DOCTYPE html> <html> <head> <title>My First HTML Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first HTML page.</p> </body> </html>
HTML Elements
The <html> Element The <html> element is the root element of an HTML page. It encompasses all other elements and content. It signifies the beginning and end of an HTML document.
The <head> Element The <head> element contains meta-information about the HTML document, such as the title, character set, styles, scripts, and other meta tags. This information is not displayed on the web page but is used by browsers and search engines.
The <title> Element The <title> element specifies the title of the HTML document. The title is displayed in the browser's title bar or tab. It is essential for SEO as it helps search engines understand the content of the page.
The <body> Element The <body> element contains all the visible content of the web page, such as text, images, links, and other multimedia. This is where the main content of your HTML document is placed.
More Specialized Elements:
HTML Headings
Headings are used to define the headings of sections in your HTML document. HTML provides six levels of headings, from <h1> to <h6>, with <h1> being the highest level and <h6> the lowest. Here's an example:
<h1>Main Heading</h1> <h2>Subheading</h2> <h3>Sub-subheading</h3>
HTML Paragraphs
Paragraphs are used to define blocks of text. The <p> element is used to create a paragraph. Here is an example:
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML Links
Links are created using the <a> element, which stands for "anchor." Links are used to navigate from one page to another. The href attribute specifies the destination URL. Here's an example:
<a href="https://www.example.com">Visit Example.com</a>
HTML Images
Images are embedded in HTML documents using the <img> element. The src attribute specifies the path to the image, and the alt attribute provides alternative text for the image. Here is an example:
<img src="image.jpg" alt="Description of Image">
HTML Lists
HTML supports ordered (numbered) and unordered (bulleted) lists. Ordered lists are created using the <ol> element, while unordered lists use the <ul> element. List items are defined using the <li> element. Here are examples of both types of lists:
Ordered List:
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
Unordered List:
<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
HTML Tables
Tables are used to display data in a tabular format. An HTML table is defined using the <table> element, with rows created using the <tr> element and cells defined using the <td> element. Table headers are created using the <th> element. Here is an example:
<table> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> <td>Data 4</td> </tr> </table>
HTML Forms
Forms are used to collect user input. An HTML form is defined using the <form> element. Within the form, various input elements such as text fields, radio buttons, checkboxes, and submit buttons can be used. Here is a simple example of a form:
<form action="/submit-form" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form>
HTML Semantic Elements
Semantic elements provide meaning to the HTML structure, making it easier to understand for both browsers and developers. Examples include <header>, <nav>, <section>, <article>, <footer>, and more. Here is an example:
<header> <h1>Website Header</h1> </header> <nav> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> <section> <h2>Section Title</h2> <p>This is a section of the website.</p> </section> <footer> <p>Website Footer</p> </footer>
HTML Attributes
Attributes provide additional information about HTML elements. They are always included in the opening tag and usually come in name/value pairs, such as name="value". Common attributes include class, id, style, href, src, and alt.
Here is an example of using attributes:
<p class="intro" id="main-paragraph" style="color:blue;">This is a paragraph with attributes.</p>
This introduction to HTML covers the basics of creating web pages. By understanding the structure of an HTML document and how to use elements, attributes, and semantic tags, you can build your web pages. As you continue learning, you will discover more advanced HTML features and techniques that will help you create more complex and dynamic web pages. Happy coding!
Further Resources
To continue your journey in learning HTML and web development, here are some excellent resources that can help you deepen your understanding and skills:
W3Schools
W3Schools is a comprehensive web developer site with tutorials and references on web development languages such as HTML, CSS, JavaScript, PHP, SQL, and more. Visit: W3Schools HTML Tutorial
Mozilla Developer Network (MDN)
MDN Web Docs provides detailed and up-to-date documentation on HTML, CSS, JavaScript, and many other web technologies. It's a great resource for both beginners and experienced developers. Visit: MDN HTML Guide
FreeCodeCamp
FreeCodeCamp offers a full course on HTML and web development. It includes interactive coding lessons and projects to help you practice what you learn. Visit: FreeCodeCamp HTML Course
Codecademy
Codecademy offers interactive coding lessons on HTML and other web technologies. It's a great platform for hands-on learning with immediate feedback. Visit: Codecademy HTML Course
HTML.com
HTML.com is a helpful resource for learning HTML with tutorials, examples, and references. It's a good place to start if you're new to web development. Visit: HTML.com
YouTube Tutorials
YouTube has a plethora of video tutorials on HTML from various educators. Channels like Traversy Media, The Net Ninja, and Programming with Mosh provide excellent tutorials and walkthroughs.