HTML Basics

many colored bricks stacked together against each other, one is orange, the other red

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

HTML, or HyperText Markup Language, is the backbone of web content. It provides structure to web pages by using a system of tags and attributes. Let's dive into the world of HTML and learn about its fundamentals.

HTML Tags and Elements

HTML tags are the building blocks of an HTML document. They are used to define and organize content on the page. A tag consists of a name enclosed in angle brackets, like <tagname>. Most HTML tags come in pairs, with an opening tag, <tagname>, and a closing tag, </tagname>.

An HTML element is the content between the opening and closing tags. For example, the paragraph element, defined by the <p> tag, looks like this:

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

Nesting Elements

You can nest elements within other elements to create more complex structures. When doing so, ensure that the elements are properly nested and closed in the correct order. Here's an example:

<p>This is a paragraph containing a <strong>strong emphasis</strong> element.</p>

Basic HTML Structure

A basic HTML document has a standard structure consisting of the following elements:

  • <!DOCTYPE html>: This declaration defines the document type and version of HTML being used.
  • <html>: The root element that contains all other elements in the page.
  • <head>: Contains meta information about the document, such as the title and character set.
  • <title>: Defines the title of the document, which is displayed in the browser's title bar or tab.
  • <body>: Contains the content of the web page, such as text, images, and links.

Here's an example of a simple HTML document:

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

HTML Attributes

Attributes provide additional information about an element and are placed within the opening tag. They consist of a name-value pair, with the name followed by an equals sign and the value enclosed in double quotes: name="value".

Common attributes include id, class, src, and href. Here's an example using the a (anchor) element with the href attribute:

<a href="https://cratecode.com">Visit Cratecode</a>

Common HTML Elements

Here are a few essential HTML elements you'll encounter frequently:

  • Headings: <h1> to <h6> tags define headings, with <h1> being the largest and <h6> the smallest.
  • Paragraphs: <p> elements are used for paragraphs.
  • Links: <a> elements create hyperlinks, with the href attribute defining the destination.
  • Images: <img> elements display images, with the src attribute specifying the image source.
  • Lists: <ul> (unordered list) and <ol> (ordered list) elements create lists, with <li> elements defining list items.

With these basic concepts in hand, you're ready to start creating your own HTML pages. As you explore further, you'll discover a wide variety of tags and attributes to help craft engaging and interactive web experiences.

Hey there! Want to learn more? Cratecode is an online learning platform that lets you forge your own path. Click here to check out a lesson: Web Frameworks (React) (psst, it's free!).

Similar Articles