Contents
Basic Concepts
HTML (HyperText Markup Language) is the backbone of every webpage. It’s made up of simple building blocks that help define how content should be shown in a browser. Once you get the hang of the basics, you’ll be able to create clean, structured, and accessible web pages.
HTML Syntax and Structure
HTML uses a tag-based system to tell the browser what each part of the page is. Each element is defined by tags, and most of them have an opening and a closing tag.
Basic HTML Element:
<tagname>Content goes here</tagname>
- Opening Tag:
<tagname>starts the element. - Content: The stuff inside the element (text, images, other HTML elements).
- Closing Tag:
</tagname>closes the element.
Some elements don’t need a closing tag—they’re self-closing, like an image tag:
<img decoding="async" src="image.jpg" alt="A description of the image" />
Elements and Tags
In HTML, elements are made up of an opening tag, the content, and a closing tag. These elements define things like headings, paragraphs, images, links, and more.
Common HTML Elements:
Headings: Use these for titles or subtitles.
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
- Paragraphs: For blocks of text.
<p>This is a paragraph of text.</p>
- Links (Anchors): To create clickable links to other web pages.
<a href="https://www.example.com">Click here to visit Example</a>
- Images: To display pictures on your page.
<img decoding="async" src="image.jpg" alt="Description of the image" />
Attributes and Values
Attributes are like extra information you give to an element. They’re added inside the opening tag and usually have a name and a value in quotes.
General Attribute Example:
<tagname attribute="value">Content</tagname>
Example with an Image:
<img decoding="async" src="logo.png" alt="Company Logo" width="200" height="100">
src: Path to the image file.alt: Text that shows up if the image doesn’t load (or for screen readers).widthandheight: Set the image size.
Example with a Link:
<a href="https://www.example.com" target="_blank">Visit Example</a>
href: The URL for the link.target="_blank": Opens the link in a new tab.
Common Attributes:
id: Gives a unique identifier to an element.class: Assigns a class name for styling or JavaScript use.style: Adds inline CSS to style an element directly.title: Provides a tooltip when the user hovers over the element.
HTML Document Structure
An HTML document follows a specific structure to keep things organized and readable by browsers. It has essential elements that define the document and the visible content.
Basic HTML Document Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
Breaking it Down:
<!DOCTYPE html>: Tells the browser this is an HTML5 document.<html>: The root element that wraps all the content on the page.<head>: Contains meta-information (like character set and title), links to CSS or scripts, and is invisible on the actual page.<meta charset="UTF-8">: Sets the character encoding to UTF-8, which supports most languages.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Helps the page scale correctly on different devices, which is important for responsive design.<title>: The title that appears in the browser tab and is used by search engines.<body>: Holds all the content that users see and interact with on the page.
Summary
The basics of HTML start with understanding its syntax and structure. HTML uses elements and tags to define content, while attributes add extra functionality and information. Finally, the HTML document structure organizes everything in a way that browsers can easily read. With these foundational concepts, you can start building web pages that are well-structured, accessible, and functional.