Essential HTML Terms: A Beginner’s Lexicon

HTML Lexicon

HTML (HyperText Markup Language) is the foundation of web development, providing the structure for all web pages. To create effective and well-structured websites, it’s essential to familiarize yourself with the key components of HTML. This lexicon will guide you through important terms and concepts, equipping you with the knowledge you need to start building your own web pages confidently.

HTML (HyperText Markup Language)

HTML is the standard markup language used to create web pages. It structures the content on the web, defining elements like headings, paragraphs, links, images, and more.

Elements

Elements are the building blocks of HTML. They are defined by tags and can contain attributes that provide additional information about the element. Example:

<p>This is a paragraph.</p>

3. Tags

Tags are used to create elements in HTML. They typically come in pairs: an opening tag and a closing tag. Example:

<h1>This is a heading</h1>

4. Attributes

Attributes provide additional information about an element. They are included in the opening tag and come in name/value pairs. Example:

<a href="https://www.example.com">Visit Example</a>

5. Headings

Headings are used to define the structure of your content. HTML provides six levels of headings, from <h1> to <h6>, with <h1> being the most important. Example:

<h1>Main Title</h1>
<h2>Subheading</h2>

6. Paragraphs

Paragraphs are defined using the <p> tag and are used to group together related sentences. Example:

<p>This is a paragraph of text.</p>

7. Links

Links are created using the tag, allowing users to navigate to other pages or websites. Example:

<a href="https://www.example.com">Click here to visit Example</a>

8. Images

Images are embedded using the <img> tag, which requires the src attribute to specify the image file path. Example:

<img src="image.jpg" alt="Description of image">

9. Lists

HTML supports ordered (<ol>) and unordered lists (<ul>), with list items defined by the <li> tag. Example:

<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

Sample HTML Page

Here’s a simple example of a complete HTML page that incorporates some of these elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a sample paragraph on my first HTML page.</p>
    <a href="https://www.example.com">Visit Example</a>
    <img src="image.jpg" alt="A sample image">
    <h2>My Favorite Foods</h2>
    <ul>
        <li>Pizza</li>
        <li>Sushi</li>
        <li>Ice Cream</li>
    </ul>
</body>
</html>

Index: Getting Started with HTML

Finding a Good HTML Editor

Using a dedicated code editor, like VSCodium or Visual Studio Code, can significantly enhance your HTML coding experience. Code editors come equipped with features such as syntax highlighting, auto-completion, and tag closing, making it easier and more efficient to write and edit your HTML. While a simple text editor will work in a pinch, it lacks these helpful tools, which can slow down your workflow and increase the chances of errors.

Steps to Create Your First HTML Page

Create a Directory
- Start by creating a new directory (folder) on your computer where you’ll store your HTML project files. This will help keep your work organized.
Create the index.html File
- Inside your new directory, create a file named index.html. This will be the main file for your web page.
Copy the Provided Template
- Copy the HTML template provided in this lexicon and paste it into your index.html file. This gives you a solid foundation to build upon.
Start Adding Elements
- Begin adding HTML elements to your file as explained in the lexicon. Experiment with different tags, attributes, and content to customize your page.
Save Your Work Regularly
- Make sure to save your changes frequently. It’s also a good practice to save incremental versions of your file (e.g., index_v1.html, index_v2.html, etc.). This allows you to revert to earlier versions if needed, making it easier to track changes and improvements.
Run Your HTML File in a Local Browser
- To view your HTML page, open your index.html file in a web browser. You can do this by double-clicking the file or right-clicking and selecting “Open with” and choosing your preferred browser.

Next Steps: Exploring CSS

Once you’re comfortable with HTML, the next step is to enhance your web pages with CSS (Cascading Style Sheets). CSS allows you to style your HTML elements, giving your site a more polished and visually appealing look. Stay tuned for our upcoming guide on getting started with CSS!