HTML Featured

Introduction to HTML

What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create web pages. Think of HTML as the “skeleton” or “structure” of your website. It tells the web browser how to organize content—where the headings go, where the paragraphs are, and where images should be displayed.

  • HyperText: Links that connect web pages to one another.
  • Markup: The code (tags) that surrounds content to define its structure.

The Basic Structure

Every HTML document follows a specific structure. This is often called the “boilerplate.” Here is what the bare minimum looks like:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title><link rel="preload" as="font" href="https://a1classes.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.2" type="font/woff2" crossorigin="anonymous" />
</head>
<body>

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


</body>
</html>

Breakdown of the Code:

  • <!DOCTYPE html>: Tells the browser that this is an HTML5 document.
  • <html>: The root element that contains all the code.
  • <head>: Contains "meta" information about the page (like the title shown in the browser tab) that isn't visible on the main page.
  • <body>: Contains the visible page content (text, images, links).

Understanding Tags and Elements

HTML uses tags to define elements. Tags usually come in pairs: an opening tag and a closing tag.

  • Opening Tag:<p>(Starts the element)
  • Content:Hello World (The info inside)
  • Closing Tag:</p>(Ends the element)

Note: Some tags are “self-closing” or “empty,” meaning they don’t need a closing tag (e.g., <br> for a line break or <img> for images).

Essential HTML Tags

Here are the most common tags you will use when building a website:

Headings

Headings define the structure and hierarchy of your content. <h1> is the most important, and <h6> is the least.

				
					<h1>Main Title (H1)</h1>
<h2>Subheading (H2)</h2>
<h3>Section Title (H3)</h3>

Paragraphs

The <p> tag defines a block of text.

				
					<p>This is a paragraph of text explaining a topic.</p>
Links (Anchors) The <a> tag creates a hyperlink. The href attribute specifies the destination URL. 
				
					<a href="https://www.google.com">Click here to go to Google</a>

Lists

  • Unordered List<ul>: Creates a bulleted list.
  • Ordered List<ol>: Creates a numbered list.
  • List Item<li>: The actual item inside the list. 
				
					<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

HTML Attributes

Attributes provide additional information about HTML elements. They are always specified in the opening tag and usually come in name/value pairs like name="value".

AttributeDescriptionExample
hrefSpecifies the URL for a link<a href="page.html">
srcSpecifies the path to an image<img src="pic.jpg">
widthSpecifies the width of an image<img width="500">
altSpecifies alt text for an image<img alt="A dog">
styleAdds inline CSS styles (color, font, etc.)<p style="color:red;">

Summary: Your First Web Page

If you put it all together, a simple “About Me” page might look like this: 
				
					<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title><link rel="preload" as="font" href="https://a1classes.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.2" type="font/woff2" crossorigin="anonymous" />
</head>
<body>

    <h1>Welcome to My Website</h1>
    <p>This is a paragraph about the website. We teach coding here!</p>
    
    <h2>My Hobbies</h2>
    <ul>
        <li>Coding</li>
        <li>Reading</li>
        <li>Gaming</li>
    </ul>

    <a href="contact.html">Contact Us</a>


</body>
</html>
Prev
Next