DEV Community

Cover image for Everything About HTML: A Beginner’s Guide
Scofield Idehen
Scofield Idehen

Posted on • Originally published at blog.learnhub.africa

Everything About HTML: A Beginner’s Guide

#html #webdev #beginners #programming

HTML, which stands for Hypertext Markup Language, is the standard language used for creating web pages and web applications.

This guide will provide a comprehensive introduction to HTML, covering everything from basic syntax and semantics to more advanced features.

I aim to explain HTML in simple terms so that even someone with no coding experience can learn how to build web pages with HTML.

If you want to get started as a programmer, check out the article, How to Learn Programming in 2023 

What is HTML?

HTML is a markup language, which means it uses tags to label content and define the structure of a web page. Here is a very basic HTML document:

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p> 
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The tags provide semantic meaning and structure. For example, the <html> tags tell the browser this is an HTML document. <head> contains metadata like the page title. <body> contains the visible content. The <h1> tag defines a top-level heading, while <p> defines a paragraph of text.

When a browser loads an HTML page, it reads the markup tags and renders them as a formatted web page. The tags tell the browser how to display each element on the screen.

Is It Possible To Become a Programmer in 3 Months? find how in this thrilling article

HTML Document Structure

All HTML documents have a basic structure that includes the following elements:

  • <!DOCTYPE html> - The doctype declaration. This is not an HTML tag, but it tells the browser this is an HTML5 document.
  • <html> - The root element that wraps the entire document.
  • <head> - Contains metadata about the page, such as title, styles, and scripts. This is not visible to users.
  • <title> - Specifies the document title, which is shown in the browser tab.
  • <body> - Contains all the visible content like text, images, links, etc.
  • <h1>...<h6> - Headings start with <h1> for the most important down to <h6> for the least important.
  • <p> - Paragraphs of text.

Here is an example with all the essential elements:


<!DOCTYPE html> 
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This basic structure gives the browser the necessary information to render the page correctly.

HTML Elements and Tags

HTML documents are made up of nested HTML elements. Elements are defined by tags that wrap around content. The general syntax for an element is:

<tagname>Content goes here...</tagname>

Some common HTML elements include:

  • <h1> - <h6> - Header tags
  • <p> - Paragraph tag
  • <a> - Anchor tag for links
  • <img> - Image tag
  • <div> - Division or section tag
  • <span> - Inline container

For example:


<h1>This is a top level heading</h1>

<p>This is a paragraph of text. <a href="https://www.example.com">Here is a link.</a></p>

<div>
  <img src="image.png" alt="My image">
</div>
Enter fullscreen mode Exit fullscreen mode

Most elements contain opening and closing tags with content in between. But some elements like <img> are self-closing with just a single tag.

HTML Attributes

HTML elements can have attributes which provide additional information about an element:

<a href="https://www.example.com"&gt;Example&lt;/a>

The href attribute provides the link destination for the anchor tag.

Common attributes include:

  • id - Unique identifier for an element
  • class - Class name that identifies an element
  • src - Specifies a source for media elements like <img>
  • href - Destination for hyperlinks
  • alt - Alternative text for images
  • style - Applies CSS styling to an element

Attributes are defined in the opening tag after the element name. The general syntax is:

<element attribute1="value1" attribute2="value2">

HTML Headings

Headings in HTML are defined with the <h1> to <h6> tags. <h1> is the highest or most important heading, while <h6> is the lowest level:


<h1>Heading 1</h1>
<h2>Heading 2</h2> 
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Enter fullscreen mode Exit fullscreen mode

Headings help create document structure and outline the topics on a page. They are also used by search engines to index and determine content.

HTML Paragraphs

The HTML <p> tag defines a paragraph of text:

<p>This is a paragraph of text. Paragraphs contain related sentences grouped together.</p>
Enter fullscreen mode Exit fullscreen mode

Browsers automatically add some margin before and after paragraphs to distinguish them.

You can add line breaks within a paragraph using the <br> tag:

<p>This paragraph<br>contains a line break.</p>

HTML Links

Links allow users to navigate to other pages and are defined with the HTML anchor tag <a>:

<a href="https://www.example.com"&gt;Link to Example</a>

The href attribute specifies the destination of the link. This can be an absolute or relative URL.

You can also link to elements on the same page by using id attributes:


<a href="#top">Back to Top</a> 
<h2 id="top">Top of Page</h2>
Enter fullscreen mode Exit fullscreen mode

The target attribute can specify if the link opens in a new browser tab:

<a href="http://www.example.com" target="_blank">Open in New Tab</a>

HTML Images

The <img> tag embeds an image file onto a web page:

<img src="image.png" alt="My Image">

  • The src attribute specifies the path to the image. This can be a relative or absolute URL.
  • The alt attribute provides alternative text that describes the image for accessibility.

Images can also have width, height, and other attributes:

<img src="image.png" alt="My Image" width="400" height="300">

HTML Tables

Tables allow you to arrange data like text, images, links, and other elements into rows and columns.

Tables are defined with the <table> tag. Rows are defined with <tr>, table headers with <th>, and table cells with <td>.


<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

You can span columns using the colspan attribute and span rows with rowspan. There are also additional elements like <thead>, <tbody>, and <tfoot> to structure tables further.

HTML Lists

HTML supports ordered, unordered, and definition lists.

Ordered lists use numbers:

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Unordered lists use bullets:

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Definition lists are groups of terms and definitions:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

Lists help organize content and improve readability.

HTML Div and Span

The <div> and <span> tags provide ways to group content for styling:

  • <div> defines a division or section in your document. It is a block-level element that starts on a new line.
  • <span> is an inline container for text. It allows styling part of a line.

For example:

<div class="newsletter">
  <h2>Subscribe to our Newsletter</h2>

  <p>Get monthly updates delivered to your inbox.</p>
</div>

<p>You can <span class="highlight">highlight text</span> with the span tag.</p>
Enter fullscreen mode Exit fullscreen mode

HTML Forms

Forms allow users to input data like text, select options, manipulate controls, and submit information to the server:


<form action="/signup" method="post">

  <label>Name:</label>
  <input type="text" name="name">

  <label>Email:</label>    
  <input type="email" name="email">

  <button type="submit">Submit</button>

</form>
Enter fullscreen mode Exit fullscreen mode

This form has two text inputs, labels, and a submit button. When submitted, the form data is sent to the /signup URL using the POST method.

Some other form controls include:

  • <textarea> - Multi-line text input
  • <select> - Dropdown select menu
  • <input type="radio"> - Radio buttons
  • <input type="checkbox"> - Checkboxes
  • <input type="date"> - Date picker

There are many more form elements and attributes that allow extensive customization.

HTML Entities

Reserved characters like < or & cannot be directly used in HTML, or they will interfere with the syntax. HTML has character entities that allow you to encode these reserved characters:

< <!-- Less than < -->

> <!-- Greater than > -->

send <!-- Ampersand & -->

Copy <!-- Copyright symbol -->

There are many more predefined HTML entities for common symbols and characters.

HTML Comments

You can add comments to your HTML code that won't be visible to website visitors:

<!-- This is an HTML comment -->
<p>This is a paragraph of text.</p>
<!-- Add another comment here -->

Comments are useful for development notes, explanations, TODOs, temporary code disabling, etc.

HTML ID and Class

The id and class attributes identify particular elements:

  • The id attribute provides a unique identifier that can target a single element
  • The class attribute categories elements that may apply to more than one

For example:

<div id="header">
  <h1>My Page</h1>
</div>
<p class="tagline">This is my page tagline!</p>
Enter fullscreen mode Exit fullscreen mode

IDs and classes allow the styling of specific elements with CSS or selecting them with JavaScript.

HTML vs XHTML

Earlier versions of HTML were loosely defined, which led to messy and inconsistent web pages. XHTML (Extensible Hypertext Markup Language) introduced stricter syntax rules to improve web standards.

XHTML documents must follow these rules:

  • Elements must always be properly nested
  • Elements must always be closed
  • Element and attribute names must be lowercase
  • Attributes must have values enclosed in quotes
  • Metadata like DOCTYPE is required

XHTML has been succeeded by HTML5, which is not as strict. Most developers today use HTML without worrying about XHTML compliance.

HTML Semantic Elements

HTML5 introduced new semantic elements that provide meaning to different sections of a web page:

  • <header> - Header at the top of a page
  • <nav> - Contains navigation links
  • <main> - Primary content of the page
  • <article> - Self-contained article
  • <aside> - Side content like sidebar
  • <footer> - Footer at the bottom of page

Using semantic elements correctly helps structure the document and improves accessibility.

Block vs Inline Elements

HTML elements are either block or inline:

  • Block elements form an invisible box that takes up the full width available. They start on a new line and stack vertically. Examples are <div>, <h1>, <p>, and <section>.
  • Inline elements take up only the space needed for their content and don't start a new line. Examples are <span>, <a>, <strong>, and <img>.

Understanding block vs. inline is important for controlling layout and styling.

HTML Styles and Colors

There are several ways to style HTML content:

  • The style attribute applies inline CSS: <h1 style="color:blue">
  • The <style> element in the head defines internal CSS styles
  • External stylesheets contain CSS rules and are linked using <link rel="stylesheet" href="styles.css">

Some common CSS properties include:

color: red; /* Text color */
background: #fff; /* Background color */

font-size: 20px; /* Font size */
font-weight: bold; /* Bold text */
text-align: center; /* Center align text */
Enter fullscreen mode Exit fullscreen mode

Colors can be specified by name (blue), hex code (#0000ff), RGB (rgb(0,0,255)), and more.

Responsive Design with CSS

Responsive web design allows pages to adapt to different screen sizes and devices.

Media queries in CSS define styling rules based on device width:

/* Mobile styles */

@media (max-width: 600px) {
.page {

padding: 10px;
}
}

/* Tablet styles */

@media (min-width: 601px) and (max-width: 1024px) {
.page {
padding: 20px;
}
}
Enter fullscreen mode Exit fullscreen mode

Flexbox and CSS Grid make creating fully responsive layouts simple.

Adding JavaScript

The <script> tag allows adding JavaScript code to web pages:

<script>
// JavaScript code here
</script>
Enter fullscreen mode Exit fullscreen mode

The src attribute can link to external JavaScript files:

<script src="script.js"></script>

JavaScript allows dynamically updating content, style, animations, accessing APIs, and virtually anything else.

Some examples:

// Modify HTML
document.getElementById("title").innerHTML = "New title!"
// Change CSS
document.getElementById("box").style.backgroundColor = "blue";

// Event listeners
button.addEventListener("click", function(){

// Do something on click

});
Enter fullscreen mode Exit fullscreen mode

JavaScript provides endless possibilities for user interaction, dynamic effects, data visualization, and more.

HTML DOM Manipulation

The HTML DOM (Document Object Model) represents the page structure as objects that can be manipulated:

// Get element
const div = document.getElementById("container");
// Create element
const p = document.createElement("p");
// Add text
p.innerHTML = "Hello World!";
// Append element
div.appendChild(p);
Enter fullscreen mode Exit fullscreen mode

Common DOM methods include:

  • getElementById / getElementsByClassName - Select element(s)
  • innerHTML - Get/set inner HTML
  • createElement - Create a new element
  • appendChild - Insert element
  • removeChild - Remove element
  • setAttribute - Update attribute
  • addEventListener - Attach event handler

This allows dynamically generating HTML and updating pages via JavaScript.

HTML5 APIs

HTML5 introduced powerful built-in APIs:

  • Local Storage - Store data in the browser
  • Geolocation - Get user location
  • Canvas - Generate graphics
  • Web Workers - Run scripts in the background
  • History - Manipulate browser history
  • Drag/Drop - Add drag and drop functionality
  • Web Sockets - Real-time communication
  • Web RTC - Video/voice chat

Many more APIs exist for networking, multimedia, graphics, and more. Modern web apps rely heavily on these APIs for advanced features and interactivity.

HTML Validation

Valid HTML code ensures web pages render properly across different browsers. Validation checks for proper syntax without errors.

The W3C Markup Validation Service can validate HTML pages.

Some common validation errors include:

  • Unclosed tags
  • Missing doctype
  • Nesting issues like <p> inside <p>
  • Improper attribute syntax

The software can also validate HTML programmatically using DOM interfaces or node parsers.

Writing standards-compliant HTML is an important aspect of development.

Search Engine Optimization (SEO)

Search engines like Google determine page rankings based on on-page optimization factors:

  • Page speed
  • Mobile-friendliness
  • Semantic HTML tags
  • Quality inbound links
  • Keyword optimized content
  • Page security protocols

Following HTML best practices improves SEO rankings:

  • Use text content, not images, for headings
  • Make lists for related content
  • Use descriptive title tags
  • Structure content in heading tags
  • Use meta description tags
  • Optimize page URLs
  • Minify HTML/CSS/JS files
  • Use breadcrumb navigation
  • Include a sitemap.xml
  • Ensure cross-device accessibility
  • Keep content fresh and updated
  • Use schema.org structured data
  • Build internal links between related pages
  • Research and use targeted keywords
  • Create unique & interesting content
  • Get backlinks from authority sites
  • Use social media to promote your content
  • Analyze stats with Google Analytics
  • Check for broken links and fix errors
  • Use HTTPS encryption on your site

Paying attention to these SEO fundamentals will improve search engine rankings. But it takes time and persistence. SEO is an ongoing process.

HTML Editors and Tools

Many text editors and IDEs provide syntax highlighting, auto-completion, and other helpful features for HTML development:

  • Visual Studio Code - Popular free editor with great HTML/CSS support through extensions
  • Sublime Text - Fast and lightweight code editor for many languages
  • Atom - Free and open-source editor from GitHub
  • Brackets - Open source HTML editor from Adobe
  • WebStorm - Powerful IDE for front-end development

Some other useful web development tools include:

Using the right tools can speed up development and troubleshooting.

HTML Resources

Here are some helpful resources for learning and mastering HTML:

Documentation

References

Communities

Courses and Tutorials

A simple Website with HTML

First, you must open your code editor. I will use Vscode in this guide; open it and save your file in a .HTML format. This allows your browser to read the code as an HTML file.

In the HTML file you created, populate it with the code below and save your work; make sure to save with the file extension.HTML, or your code will not run.


<!DOCTYPE html>
<html>

<head>
  <title>My Website</title>
  <meta name="description" content="This is my first website">
</head>

<body>

  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>  
    </nav>
  </header>

  <main>

    <article>
      <h2>Welcome to my site!</h2>
      <p>This is the home page of my new website. I'm learning to code HTML and this is one of my first web pages.</p>

      <img src="image.png" alt="website image" width="400" height="300">
    </article>

    <aside>
      <h3>Related Links</h3>
      <ul>
        <li><a href="#">HTML Tutorial</a></li>
        <li><a href="#">Web Development for Beginners</a></li>
      </ul>  
    </aside>

  </main>

  <footer>
    <p>&copy; Copyright 2021 My Website</p>
  </footer>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Open the file where you save your work and open it with a browser to see your work, will be using Google Chrome.

Your work should look like this; don't panic if you do not see the image.

Our image file was not created, and it is not in the same file as our code program; to correct that, I will copy our image, which we created as image.jpg

<img src="image.png" alt="website image" width="400" height="300">

Now, our image is the same file. A much better way is to put them in the same file as that is the correct way.

Save your HTML code again and reload your browser.

The image is showing.

FAQ About HTML

How can I build a web app with HTML, React, and Node.js?

HTML provides the structure and content for web apps. React is a popular JavaScript library for building user interfaces. Node.js runs JavaScript on the server side. Together, they allow for building full-stack web applications. HTML, JSX, and CSS code the UI components in React. Node.js handles the server-side logic and database integration via APIs.

What is the best way to make my HTML emails work across different email clients?

Using a templating engine like Nodemailer can help ensure HTML emails render properly across clients. Inline styling instead of CSS helps avoid inconsistencies. Testing your HTML emails across multiple clients like Gmail, Outlook, Apple Mail is also advised. Services like Email on Acid can preview rendering differences.

How can I improve accessibility for visually impaired users?

Using proper HTML semantic elements provides a structure for screen readers. Alt text descriptions for images are critical. Ensuring color contrast and font size options also helps improve accessibility.

What SEO tips should I follow for my HTML site?

Optimize page speed, use semantic HTML tags, write quality content with target keywords, build internal links between related pages, earn backlinks, encourage social shares, and monitor analytics for traffic insights. HTML improvements like compressed files, metadata, and image optimization boost SEO.

What HTML validation tools should I use before launching my site?

The W3C Markup Validation Service checks for compliant HTML. Lighthouse audits for performance, accessibility, and SEO best practices. Browser developer tools like Chrome DevTools and Firefox Page Inspector help debug issues. Valid HTML ensures proper rendering across different browsers.

What IDEs or code editors are best for HTML development?

Visual Studio Code has great HTML/CSS support through extensions. Sublime Text and Atom offer lightweight editing. WebStorm provides robust features for front-end dev. Brackets is an open-source HTML editor from Adobe. These tools enhance coding efficiency.

Conclusion

This guide covered all the essential HTML knowledge for beginners, including syntax, tags, attributes, semantic elements, forms, media, APIs, SEO, tools, and resources.

HTML is the foundation for building anything on the web. Mastering HTML allows you to create and structure web page content, connect pages together, and ensure accessibility.

Combine HTML with CSS for presentation and JavaScript for interactivity to build powerful modern web experiences.

The first step is getting comfortable with HTML fundamentals. Make sure to practice by coding many web pages, referencing documentation, and validating your markup.

HTML seems simple at first but has many nuances. Give it time, be patient with yourself, and you'll get better with experience.

If you find this article thrilling, discover extra thrilling posts like this on Learnhub Blog; we write a lot of tech-related topics from Cloud computing to Frontend Dev, Cybersecurity, AI, and Blockchain. Take a look at How to Build Offline Web Applications. 

Top comments (0)

Read next

anhchienvu profile image

Working with GitHub OAuth Authentication

AnhChienVu -

kasir-barati profile image

Module declaration in TS

Mohammad Jawad (Kasir) Barati -

imsushant12 profile image

Conclusion of My Node.js Journey and a Sneak Peek into My Upcoming AWS Series

Sushant Gaurav -

jdgamble555 profile image

Are Angular Resolvers on Life Support ?

Jonathan Gamble -