If you are new to HTML/CSS, please refer to the Introduction Guide before continuing.

Basic HTML

HTML is the foundation of web development. It stands for HyperText Markup Language, not that you really needed to know that. You can make a working website from just simple HTML, if you wanted. It won't be the most pretty site, but it can display text/media with no additional CSS or JavaScript.

The first thing to do is create an HTML file. That is as simple as going into your project folder and making an index.html file. It does not have to be index, but that is the standard name for the root HTML file for a lot of servers. You can name it anything you like, it will not stop it from working.

Now, lets discuss tags. If you don't know, tags are the main syntax that HTML uses to define a webpage. Tags are wrapped by < & >. Most tags must "close" or have a following </> pattern after the first. Example: <div></div>.

More rarely, a tag/element will self-close and only require the first tag to be present. These elements typically do not allow for nested elements to prevent odd behavior. Example: <img> (image) or <br> (line break) do not require </img> or </br> because nothing should be nested inside them, ever.

All basic HTML starts with the same "boilerplate" or template code:

<!DOCTYPE html>
<html>
<head>
  <!-- Site metadata (title, favicon, css, scripts, imports, etc.) -->
</head>
<body>
  <!-- Things to display on-screen (page contents) -->
</body>
</html>

The most confusing of all the foundational tags, in my opinion, is the <!DOCTYPE html>. It's not terribly easy to remember the formatting. (Luckily, most IDEs support the ! Emmet abbreviation to create the boilerplate for you, so you don't have to remember!)

Aside from that, all other tags are nested (or grouped) within the <html></html> tags. This is where your whole site will live.

Within the <html> tags, you'll typically find <head> and <body> tags.

The <head></head> area is for site metadata and things that are generally "unseen." Things like importing your external CSS and JS files, adding a title for the browser tab, including a favicon image, things like that.

The <body></body> area is for your main site contents. Anything you want to display on the webpage for others to see. This is where you'd put your main text, navigation, images, video, audio, etc.

That's all you really need to start coding a website! But, another important thing is seeing your work change as you go. Luckily, any web browser can just open HTML files from anywhere your computer!

If you double-click the file, or otherwise find an "open with..." option (usually by right-clicking), you should be able to just launch the file in your favorite browser, and refresh the page to check for updates as you work.

Let's now move onto actually creating a basic webpage. It's easy enough, but will require memorizing some tags and what they do.

The most basic of which is a <div> or "divider" tag. This tag is just an empty container element that has no styles or unique attributes. It's essentially a generic wrapper element that has no special meaning to your browser. It becomes what you want, like molding clay.

Counter to what you may have heard, though, you shouldn't just use <div> for anything and everything... if you actually care about accessibility features in your site, that is.

Semantic HTML is extremely important for making it easier for visually-impaired or physically-impaired visitors. These semantic tags, as the name may suggest, means that the name of the tag defines its use. Before we proceed further, I'd like to not that I am NOT an expert in semantic HTML or web accessibility. I do my best to follow expected patterns, but I will often still make mistakes or use incorrect elements. Moving on!

If you didn't know, you can just type plain text into a webpage and it will display without issue, but putting it inside of a <p> or "paragraph" tag tells the browser explicitly that this is basic text.

You also have many different types of text tags we may explore deeper later on. For now, just know that you can utilize things like:

• Headings - <h1> (largest) through <h6> (smallest); denotes a section title, or a page/article heading.
• Links/Anchors - <a> (anchor) creates a clickable link to another webpage, scrolls to a section on the current page, or functions as a download button.
• Formatting tags - <u> (underline), <strong> (bold), <strike> (line-through/strike-through), <em> (emphasized/italic), <small> (small text).
• Line breaks - <br> creates a new line after the tag.
• Spans - <span> generally denotes an arbitrary span of text to modify independently.
• Lists - <ul> (un-ordered/bullet list), <ol> (ordered/numbered list), <li> (list item)

There are plenty more, but there's a lot of time to get familiar with them at your own pace.

There are also containing elements that serve to wrap text blocks and media. Things like:

• Header - <header> is a container that defines the top-most area of a site that normally appears on every page. You generally have links to other pages, user login buttons/links, logo, etc. in your header.
• Footer - <footer> is the bottom-most element on your page and normally appears on every page. This usually contains legal information, copyright notices, and a list of all pages in your site called a "sitemap."
• Main - <main> generally contains the main contents of your page. This is where all your actual website stuff goes. Sections, articles, galleries, etc.
• Section - <section> is a container that defines a page section; a block of related elements.

As mentioned before, this is just a small potion of the available tags. For more information, visit the reference on developer.mozilla.org. (Anything with a trash or "square infinity" icon next to it is no longer officially supported and should not be used in new websites.)

All the examples above are relied upon by assistive technologies, like screen-readers, to find important landmarks to give the visitor an idea of how to navigate your site.

Simply using these elements will not make your site fully-accessible, but not having them is a far worse experience for visitors that rely do on assistive technology.

Last tag for now is a comment. You can write comments for later reference or to better communicate what an element/section is doing. Comments are always hidden on the visible webpage, so write as many as you need to.

Comments can simply be written like a normal tag, but with an exclamation after the first caret, and four dashes before the last caret. Between the four dashes, you can write your comments: <!-- Your comment text here -->.

Be aware that in vanilla HTML, comments can still be read by anyone in the inspect menu, so don't put anything sensitive in there!

Comments can also be written on multiple lines, so you could add line-breaks in the middle like this:

<!--
  This comment can be on multiple line!
  Check it out!
-->

With all that in mind, let's build a very basic page in pure HTML. We'll start by adding a <header>, <main>, & <footer> to the <body> as a very basic/standard web page layout.

A small note on formatting: Any nested element should have a single tab indent to visually separate it from the parent elements. The only general exceptions are the <head> and <body> tags nested within the main <html> tags.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
</html>

Within the <head> tag, we can create a text-based logo via a <p> or <h4> tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <header>
    <h4>My Site</h4>
  </header>
  <main></main>
  <footer></footer>
</body>
</html>

We can also create a few <section> tags within the <main> to denote major sections of information.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <header>
    <h4>My Site</h4>
  </header>
  <main>
    <section></section>
    <section></section>
  </main>
  <footer></footer>
</body>
</html>

In the first <section> we'll just add the largest heading (<h1>) to label the section, and provide a paragraph (<p>) of information about the site.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <header>
    <h4>My Site</h4>
  </header>
  <main>
    <section>
      <h1>About</h1>
      <p>Check out this cool site I made!</p>
    </section>
    <section></section>
  </main>
  <footer></footer>
</body>
</html>

In the second <section> we can add a smaller heading (<h3>) to label the section, as it's less important, and try out an unordered/bullet list (<ul>) of links (<a>). Each link should be contained by a list item (<li>) element. List items are intended to be the direct child of a ul or ol list container.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <header>
    <h4>My Site</h4>
  </header>
  <main>
    <section>
      <h1>About</h1>
      <p>Check out this cool site I made!</p>
    </section>
    <section>
      <h3>Find me hanging out at these other places!</h3>
      <ul>
        <li><a href="https://example.com">Bluesky</a></li>
        <li><a href="https://example.com">YouTube</a></li>
        <li><a href="https://example.com">Reddit</a></li>
      </ul>
    </section>
  </main>
  <footer></footer>
</body>
</html>

You can feel free to add as many tags as you want to get comfortable creating the general page structure.

To round-off the body tags, you can add a copyright details paragraph (<p>) to the <footer>. We can use a special HTML entity © to insert a copyright symbol "©". You can use whatever formatting and text you want here, but I'm just going to put my name, the copyright symbol, the current year, and the name of the site. This would look like: My Name © 2026 My Site

Hold the alt key and type 0169 on your keyboard number pad to directly insert the copyright symbol (©) as text. More info: Alt-codes

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <header>
    <h4>My Site</h4>
  </header>
  <main>
    <section>
      <h1>Check out this cool site I made!</h1>
      <p>More about this cool site...</p>
    </section>
    <section>
      <h3>Find me hanging out at these other places!</h3>
      <ul>
        <li><a href="https://example.com">Bluesky</a></li>
        <li><a href="https://example.com">YouTube</a></li>
        <li><a href="https://example.com">Tumblr</a></li>
      </ul>
    </section>
  </main>
  <footer>
    <p>My Site &copy; 2026 Myself</p>  
  </footer>
</body>
</html>

And, to finish off this little test page, let's also adjust the text in the browser tab by adding a <title> to the <head> tag.

<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
</head>
<body>
  <header>
    <h4>My Site</h4>
  </header>
  <main>
    <section>
      <h1>Check out this cool site I made!</h1>
      <p>More about this cool site...</p>
    </section>
    <section>
      <h3>Find me hanging out at these other places!</h3>
      <ul>
        <li><a href="https://example.com">Bluesky</a></li>
        <li><a href="https://example.com">YouTube</a></li>
        <li><a href="https://example.com">Tumblr</a></li>
      </ul>
    </section>
  </main>
  <footer>
    <p>My Site &copy; 2026 Myself</p>  
  </footer>
</body>
</html>

If you really want to, try adding some comments to help you remember what things are or do:

<!DOCTYPE html>
<html>
<head>
  <!-- Changes browser tab text. -->
  <title>My Site</title>
</head>
<body>
  <!-- Top-most element on the page. -->
  <header>
    <!-- Temporary logo -->
    <h4>My Site</h4>
  </header>
  <!-- Main page contents -->
  <main>
    <!-- About section -->
    <section>
      <!-- About section heading. -->
      <h1>Check out this cool site I made!</h1>
      <!-- About this page/site. -->
      <p>More about this cool site...</p>
    </section>
    <!-- Social media section -->
    <section>
      <!-- Social media section heading. -->
      <h3>Find me hanging out at these other places!</h3>
      <!-- Social media links -->
      <ul>
        <li><a href="https://example.com">Bluesky</a></li>
        <li><a href="https://example.com">YouTube</a></li>
        <li><a href="https://example.com">Tumblr</a></li>
      </ul>
    </section>
  </main>
  <!-- Bottom-most element on the page. -->
  <footer>
    <!-- Copyright information. -->
    <p>My Site &copy; 2026 Myself</p>  
  </footer>
</body>
</html>

If you're still a bit lost, don't worry, it can really be a lot to try to remember your first few attempts. I still have to look up references constantly, so it's really not a big deal. Even experienced developers can't remember every aspect of a programming language. Please, use reference material as often as you need to.

With a very basic landing page, we can move into another important aspect of HTML: attributes.

Attributes are basically different properties to apply to an element. Not every element supports every property, so this is another case where you'll need to reference the HTML specs.

Some commonly applied attributes are class, id, title, and style.

The class attribute allows you to essentially state the purpose of the element, either functionally, visually, or both. Classes are often referenced in CSS and JavaScript to target a specific HTML element or group of HTML elements. Example: <div class="blog-container pink-shadow">

The id attribute is quite similar, but is typically used more closely to a unique identifier. Many elements can still share an ID, but if you intend to use IDs for site navigation, they should at least be unique per-page. IDs are referenced with a hash/sharp/pound symbol #. Example: <div id="element1">. You can navigate directly to this element ID with: <a href="#element1">, so long as that element is on the current page, or other page you've linked to.

The title attribute will create a small pop-up when the element is hovered. This can be useful for tooltips or giving definitions for abbreviations. Examples: <div title="Hover me!"> or <abbr title="United States of America">U.S.A.</abbr>

Lastly, style is how you can apply "inline styles" or CSS without needing to place it in a file or other tag. However, the trade-off is that styles can only be applied to the element that has the attribute assigned. Example: <div style="background: red;"> (I know we haven't discussed CSS yet. We'll get to it.)

Other tags/elements have special attributes that almost exclusively apply to them. Things like links/anchors href attribute that allows you to provide a link URL/ID; images have src to set a relative path/URL to an image file and alt to provide a description of the image; type to select a role or appearance of an input element or button.

With that, I think we have what we'll need to get started with CSS. See you in the next guide!