DEV Community: Oluwasegun Olatunji

Semantic HTML Explained: A Beginner-Friendly Guide to Accessibility and SEO

Oluwasegun Olatunji — Mon, 27 Jul 2026 20:29:15 +0000

If you open the source of almost any half-finished side project you'll find the same thing: a wall of <div>s, each one wearing a class name like wrapper-2 or flex-box-outer, none of them telling you a single thing about what's actually inside. It works. Browsers don't care. But screen readers, search engines, and the next developer who opens that file all care a lot and that's the gap semantic HTML is built to close

Who this article is for: This article is for people who already know the basics of HTML; what a tag is, what an attribute is, roughly how elements nest inside each other. If any of that sounds unfamiliar, MDN's HTML basics guide is a solid five-minute primer to come back with. Everything past this point assumes that foundation and builds on it.

Semantic HTML simply means picking tags based on what your content is, not how you want it to look. A <section> and a <div> can be made to look pixel-identical with CSS, but only one of them tells a screen reader "here's a distinct block of content." That difference is small to write and large in what it unlocks: accessibility, SEO, and a codebase that doesn't need a decoder ring six months from now.

Here's what this guide walks through:

What semantic HTML actually means, with a side-by-side example
The core semantic elements and how to use each one correctly
A full page example putting them together
Free tools for checking whether your markup actually holds up
Practical rules for using semantic HTML without overdoing it

What Semantic HTML Actually Looks Like

Talk is cheap, so here's the same layout written two ways. Both render identically in a browser; same fonts, same spacing, same everything a visitor would see.

Div soup; technically works, communicates nothing:

<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
    <div class="nav-item"><a href="/blog">Blog</a></div>
  </div>
</div>
<div class="main">
  <div class="post">
    <div class="post-title">My Article</div>
    <div class="post-content">...</div>
  </div>
</div>

Semantic; same visual result, actual structure baked in:

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>My Article</h1>
    <p>...</p>
  </article>
</main>

Strip away every class name from the second example and it still makes sense on its own. A screen reader (software that reads a page aloud for people who are blind or have low vision) can announce "navigation" and "main content" straight from the tags, no CSS required, no guesswork. That's the whole idea in one example: the tag itself carries meaning, instead of relying on a class name a machine can't understand.

The Core Elements, One by One

Here's what each one is for and when to reach for it. Don't worry about memorizing all of these at onc, most developers pick them up naturally after building a page or two with them.

<header> holds introductory content or navigation. Think of it as "what comes before the point." A page can have one overall <header>, and individual <article> elements can have their own too.

<header>
  <h1>My Tech Blog</h1>
  <p>Notes on web dev, AI, and everything in between</p>
</header>

<nav> wraps a block of major navigation links. Not every list of links needs one; a handful of tag links buried in a footer usually doesn't qualify.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Quick note on that aria-label: ARIA stands for Accessible Rich Internet Applications, it's a set of extra attributes you can add to HTML to give assistive technology more context than the tag alone provides. Here, it just tells a screen reader "call this one Main navigation" so it's distinguishable from any other <nav> on the page. You'll see it again a couple of sections down.

<main> is the one-per-page container for whatever makes this page unique. Don't put repeated site furniture "headers, footers, sidebars" inside it.

<main>
  <h1>Understanding Semantic HTML</h1>
  <p>Semantic HTML is a web development methodology...</p>
</main>

<section> groups content around a shared theme, usually under its own heading. A decent test: if it would make sense as an entry in a table of contents, it's probably a section. For example, if your page had headings like "Pricing," "Features," and "FAQ," each of those would naturally be its own <section>.

<section>
  <h2>Why Semantic HTML Matters</h2>
  <p>Semantic markup helps search engines and assistive technologies...</p>
</section>

<article> is for anything self-contained enough to stand on its own if you lifted it out and dropped it somewhere else; a blog post, a comment, a product card.

<article>
  <h2>5 Tips for Faster Websites</h2>
  <p>Published on <time datetime="2026-07-20">July 20, 2026</time></p>
  <p>Article content goes here...</p>
</article>

<article> vs. <section>, in one line: <article> answers "could this be syndicated or reused on its own?" while <section> answers "is this a themed chunk of a bigger whole?" That's why they nest so naturally. A single <article> (a blog post) commonly contains several <section>s (its subtopics), the way this guide's own full example below wraps a <section> inside an <article>.

<aside> is for content that's related but tangential; sidebars, pull quotes, "you might also like" blocks.

<aside>
  <h3>Related Posts</h3>
  <ul>
    <li><a href="/post-1">CSS Grid vs Flexbox</a></li>
    <li><a href="/post-2">A Guide to ARIA Roles</a></li>
  </ul>
</aside>

<footer> closes out its nearest sectioning ancestor — meaning the closest parent element that acts as a self-contained section, such as the <body>, an <article>, or a <section>. In practice, that usually just means "the footer belongs to whatever block it's sitting inside." It typically holds copyright info or secondary links.

<footer>
  <p>&copy; 2026 My Tech Blog. All rights reserved.</p>
</footer>

<figure> and <figcaption> bundle self-contained media — images, diagrams, code with an optional caption.

<figure>
  <img src="chart.png" alt="Bar chart showing page load times before and after optimization">
  <figcaption>Fig 1. Page load time improved by 40% after lazy-loading images.</figcaption>
</figure>

<mark> highlights text that's relevant to the reader's current context, like a matched search term.

<p>Your search for "semantic" returned 12 results, including this <mark>semantic</mark> HTML guide.</p>

<time> gives dates and times a machine-readable format underneath the human-readable text.

<p>This event starts at <time datetime="2026-08-15T18:00">6:00 PM on August 15</time>.</p>

A Full Example

Here's what a minimal blog page looks like once all of these are working together:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Tech Blog</title>
</head>
<body>
  <header>
    <h1>My Tech Blog</h1>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Understanding Semantic HTML</h2>
        <p>Published on <time datetime="2026-07-20">July 20, 2026</time></p>
      </header>

      <section>
        <h3>What Is Semantic HTML?</h3>
        <p>Semantic HTML is the use of markup to convey meaning...</p>
      </section>

      <figure>
        <img src="diagram.png" alt="Diagram of a semantic HTML page structure">
        <figcaption>Fig 1. A typical semantic page layout.</figcaption>
      </figure>
    </article>

    <aside>
      <h3>Related Posts</h3>
      <ul>
        <li><a href="/css-grid">CSS Grid vs Flexbox</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Tech Blog.</p>
  </footer>
</body>
</html>

Notice <header> shows up twice; once for the whole page, once scoped to the article. That's allowed, because each one belongs to a different sectioning context: the outer one belongs to the whole page, the inner one belongs only to that article.

Here's that exact markup rendered in a browser:

Nothing special to look at which is exactly the point. Visually, this is indistinguishable from the div-soup version styled the same way. The difference only shows up where sighted users never look.

What a Screen Reader Actually Sees

This is the part that's easy to take on faith, so here it is made concrete. I ran both a div-soup version and the semantic version above through Chromium's real accessibility tree; the same data screen readers query and pulled out every landmark each one exposes:

Why Any of This Is Worth the Effort

It's the backbone of accessibility. Screen reader users don't read a page top to bottom the way sighted users scroll, they jump between landmarks (the term for these structural regions — header, nav, main, and so on), skipping straight to <nav> or <main>. Take those landmarks away and you've taken away that shortcut; now they're stuck listening to the entire page in order just to find the content they came for.

Search engines lean on it too. Google's crawlers use structural signals to figure out what actually matters on a page. An <article> with a clean heading hierarchy is easier to parse and rank correctly than the same words sitting inside a stack of unlabeled <div>s.

Future-you (or whoever inherits the code) will thank you. Semantic markup documents itself. Six months from now, nobody has to open the stylesheet and reverse-engineer what .box-inner-2 was supposed to represent.

It behaves more consistently across platforms. Browsers and assistive technologies apply built-in behavior to semantic elements — landmark roles, default styling, keyboard handling — so your page holds together more predictably across devices without you writing that behavior yourself.

Tools That Actually Check This for You

You don't have to eyeball your markup and hope. A few tools will tell you directly where it falls short:

WAVE — a free browser extension that overlays accessibility and structure issues directly on the live page. Good starting point if you've never run an audit before.
Lighthouse (built into Chrome DevTools) — run its Accessibility and SEO audits and it'll flag things like a missing <main> or vague link text.
axe DevTools — Deque's browser extension for automated accessibility checks, including semantic structure problems.
HTML5 Outliner tools — confirm your heading levels form a real hierarchy instead of jumping from <h2> straight to <h4>.
The Accessibility panel in Chrome or Firefox DevTools — inspect any element and see exactly how assistive tech is going to interpret it.
An actual screen reader — VoiceOver on Mac, NVDA on Windows. Nothing else tells you the truth quite as fast.

A Few Rules of Thumb

Stick to one <h1> per page, and don't skip heading levels just because a smaller font looked better.
Semantic tags aren't styling shortcuts — if an element exists purely as a CSS hook with no real meaning, a plain <div> is still correct.
<main> should never be nested inside <article>, <aside>, <header>, <footer>, or another <main>.
If a page has more than one <nav>, label each with aria-label so assistive tech can tell them apart.
Write alt text that describes what the image shows or does, not "image of..." — that phrase adds nothing a screen reader doesn't already know.
Use <button> for actions and <a> for navigation. A <div onclick=""> throws away free keyboard support for no reason.
Run your markup through the W3C Validator — it'll catch nesting mistakes you'd otherwise miss.
Test with a real screen reader at least once per project. Automated tools catch a lot, but not everything.

Wrapping Up

Semantic HTML doesn't ask you to learn new syntax, it just asks you to pause before typing <div> and think about what the content actually is. That one habit does a surprising amount of work: it hands screen reader users functional landmarks, gives search engines a structure they can actually parse, and leaves behind code that doesn't need a translator.

If you're starting from a div-heavy codebase, don't try to fix it all in one sitting. Swap the outer shell first ''header, nav, footer'' run a Lighthouse audit, and follow whatever it flags next. The rest tends to fall into place once semantic thinking becomes the default instead of an afterthought.

Thank you for reading!

See you next time!

Mastering CSS Sizing: A Guide to Responsive Design

Oluwasegun Olatunji — Wed, 19 Apr 2023 16:55:48 +0000

The presentation and layout of web pages are managed using the powerful styling language known as Cascading Style Sheets, or CSS.

Size is one of the most important parts of responsive and adaptive designs, among others. In this article, we will dive deep into the world of CSS sizing, exploring the different units, techniques, and best practices for responsive design.

Here's a list of what we will cover in this article:

CSS Units
CSS Sizing Properties
Responsive Design Techniques

CSS Units

To change the size of elements in CSS, you need to know how to use the different units, and the three different types of CSS units are viewport units, relative units, and absolute

Absolute

Absolute units have a set size that is independent of the parent element's and the user's device sizes. Common absolute units are as follows:

Pixel (px) on a user's screen corresponds to a single dot. Although this is the most often used absolute unit, responsive design cannot effectively use it because it does not scale for different screen sizes.
Points (pt): One point, which was formerly employed in print media, is equivalent to 1/72 of an inch. Because it does not scale well across different devices, it is not advised for web design.

Relative Units

Relative units are perfect for flexible design since they can change in size according to the size of the parent element or other characteristics. Common related units are as follows:

Em: This measurement unit is based on the parent element's font size. For instance, 1em is equivalent to 16px if the parent's font size is 16px. Scalable typography can be made with the use of em units.
Rem: By using rem, which is unaffected by parent components' font sizes, you may guarantee uniform sizing across all of your elements.
Percentages (%): This measurement is based on how big the parent element is. For instance, a child element with a width of 50% would be 100px wide if the parent element had a width of 200px.

Viewport Units

The size of the user's device viewport determines the viewport units. These components are especially helpful for producing responsive designs that change according to the size of the screen. Common viewport units are as follows:

Viewport Width (vw): One unit is equal to one per cent of the viewport's width. For instance, 1vw is equal to 10px on a device with a viewport width of 1000px.

Viewport Height (vh): One unit equals one per cent of the viewport's height (vh).

Viewport Minimum (vmin): The smaller of vw or vh is equal to one unit in the Viewport Minimum (vmin) system.

Viewport Maximum (vmax): The larger vw or vh is equal to one unit in the Viewport Maximum (vmax) system.

Choosing the Right Units

Choosing the appropriate unit for sizing is crucial for creating responsive designs. In general, it is recommended to use relative units like em, rem, and percentages for most sizing tasks. Viewport units can be used when you want the size of an element to adapt directly to the viewport dimensions.

CSS Sizing Properties

Now that we are familiar with the various units, let's look at some of the most popular CSS properties for element sizing.

Width and Height

The width and height properties define the size of an element's content area. They can be set using any of the units discussed above.

The parameters of an element's width and height determine the size of its content area. To set them, any of the previously mentioned units can be used.

div {
  width: 50%;
  height: 200px;
}

Padding, Margin, and Border

Controlling the area around an element's content is made easier with padding, margin, and border attributes. In contrast to margin, which adds space outside the element, padding adds space inside the element, and the border attribute controls the element's border width.

div { padding: 1em;
    margin: 2rem;
    border: 1px solid black; }

Box-sizing

The box-sizing property controls how to calculate an element's dimensions. The default value, content-box subtracts padding and borders from the content area to determine the width and height.

It is simpler to control element sizing using the border-box value because padding and border are taken into account when calculating width nd height.

div {
  box-sizing: border-box;
  width: 50%;
  padding: 1em;
  border: 1px solid black;
}

Background-size and Background-position

The background image of an element can be positioned and scaled using these properties. You can change the background-size attribute to values like contain, cover, or particular measurements. The background-position attribute determines where the background image is located within the element.

div {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

Responsive Design Techniques

To make responsive designs, the layout must be changed to fit different screen sizes and devices. Here are a few well-liked methods for doing this:

Media Queries:

Based on the user's device parameters, such as screen width or device orientation, media queries let you apply several styles and also construct breakpoints that modify the layout at particular screen sizes.


@media (max-width: 768px) {
  div {
    width: 100%;
  }
}

Flexbox

Flexbox is a CSS layout module that offers a more effective method of spacing out and aligning elements inside a container. By utilizing Flexbox, you can design responsive layouts that change to fit the available space.

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1;
  min-width: 200px;
}

Grid Layout

Another layout module that uses a two-dimensional grid structure to enable the creation of intricate and responsive designs is CSS Grid. Using CSS Grid, you may specify rows and columns and insert objects inside grid cells.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.item {
  grid-column: span 1;
}

Transitions and Transforms in CSS

Responsive animations and effects can be made using CSS transformations and transitions. While transitions manage the timing of these changes, transforms let you alter the position, scale, and rotation of an element.

div:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}

Conclusion

The ability to understand CSS sizing is crucial for web designers and developers. You can only make responsive designs that look great on any device if you know about the different devices, features, and especially CSS sizing.

For the majority of sizing activities, remember to use relative units like em, rem, and percentages, use viewport units for items that must adjust to the size of the viewport and to adjust element proportions, use properties like box-sizing, padding, margin, and border. For responsive layouts, look into new layout modules like Flexbox and Grid.

Last but not least, remember to combine CSS transforms and transitions for responsive animations and effects and utilise media queries to establish breakpoints for various screen sizes. You'll be well on your way to producing stunning, responsive designs with CSS if you adhere to these best practices.

See you next time!

Photo by Mohammad Rahmani on Unsplash

Understanding Container Theory And It's Application In Web Coding

Oluwasegun Olatunji — Sun, 18 Sep 2022 12:16:27 +0000

Container, in general term means to contain something; goods or other items inside an enclosed box or even a room.

In web coding (HTML), the concept of container is not different from the above. It means containing some element into an opening and ending tag of an HTML document. Containing an element varies with each language and framework, but in this article it will be explained only in relation to HTML.

In this article, we will extensively cover the following:

HTML Tags
Types of Container Tags
Semantic Elements

HTML Tags

HTML stands for Hypertext Markup Language which employs predefined elements and tags to instruct the browser on how to display the contents on a webpage .
Tags are merely a few commands that are surrounded in angle braces(<, >) and are unofficially divided into two, which are: Empty tags and container tags.

Empty Tags

In HTML, opening tags without a closing tag(/>) are known as empty tags, void tags, or self-closing tags.
Syntax:

<tag_name>content>

<br>
break this line

They are unable to hold more elements but are used in adding lists, images, hyperlinks meta-data, etc. into a website.

Adding a closing brace to an empty tag automatically makes it an invalid syntax

<br></br>
invalid

Notably there are 15 empty tags listed in the HTML5 specification and they include:

<meta> which represents the elements and information included in the meta-data of an HTML document.

<br>, also called carriage return. It is a tag that indicates line break in a text.

<area>, used to make a portion which mapped click able on an image.

<img>, is used to embed an image into the document.

<link>, it is used to to create a connection between content and an external resources.

<base>, <col>, <embed>, <input>, <hr>, <param>, <source>, <track>, <wbr>, <base> are other empty tags in HTML.

Container Tags

Whenever a content is written between an opening and ending tag in an HTML document, the tag is referred to as a container tag.

Syntax:

<tag_name> contents </tag_name>
<p>Container tag</p>

In a line of code, the document is divided into three parts, i.e., an opening tag, content (which can also contain other tags) closing tag which put an end to the line.

The content is displayed in the browser in accordance to the structure of the document. If the container tag isn't closed, the browser applies the effect of the opening tag until the end of the page.

The <html>, <head> and <body> tags are examples of container tags. Many other tags are contained in them because they form the basic structure of an HTML document.

Examples of Container Tags

There are lots of container tags in HTML but we are going to cover a very significant few which houses both container tags and empty tag in an HTML document.

The few tags are:
<html> tag, this tag is the second tag in an HTML document, all other tags are written in it and it has its closing tag written as, </html>.

By using the opening <html> tag, the browser is informed that the page will be formatted in HTML.

<head> tag which has its closing tag written as </head> expressly contains details about the body, the page's title, the labels, etc. of a web page.

Only specific markup elements like meta, link, script, etc. are permitted in the HTML5 head title.

<body> tag is used to specify the primary content that will be shown on a website. SUCH content include: text, images, videos, links, etc. It has its closing written as, </body>.

Types of Container Tags

Embedded within the html <body> tag are types of container tags that includes; styled container tags and block container tags which are classified by their intents.

Styled Container Tags

This type of container tag consists of tags that are styled with the browser automatically by default.

For instance, an hyperlink tag <a> will be styled by the browser to make it clickable.

a: {
  color: link;
  cursor: pointer;
  text-decoration: underline;
}

The above is styled using a CSS user agent stylesheet that is provided by the browser to make it specially defined in a manner that suites the HTML standard.

The following tags are examples of styled tag and are specially styled by the browser.

Header tags<h1>, <h2>, <h3>, <h4>, <h5>, <h6> for different heading types.

The button tag <btn> for buttons.

List tags <ul>, <ol> for different kinds of lists.

Hyperlink tag <href>.

Paragraph tag <p>

Text styling tags to either make a text bold <b> or in italics <i>.

Block Container Tags

Block container tags are mainly used to divide HTML document into sections such as; header, footer, etc. in other for the document to be easily accessible and understood by browsers and developers.

Before the inception of HTML5, dividing an HTML document can only be done using a <div> tag with an id attribute. But now, <nav>, <main>, <aside>, <articles>, <header>, <footer>, and <section> tags have been drafted into the HTML5 specifications for dividing HTML documents.

`Div` Tag

A division or segment is created in a document by the container tag known as <div>.

<Div> tag is used to organize HTML elements so that they can be styled with CSS without changing its original content or layout.

A div tag has the flexibility to contain any HTML tag, including another <div>.

`Span` Tag

The HTML tag <span> is a general inline container for information that does not automatically denote anything.

It can be used to group items that needs to be styled using the class or id attribute because they have similar attribute values, like <lang>.

Note that; It can only be used when other sematic tag is not appropriate for the purpose.

Sematic Elements

An element is a part of an HTML file that instructs a web browser how to organize and interpret a particular section of the HTML file.

In the case of sematic elements, they are elements that surround the html tags. They give an HTML page content rather than just presentation. It clarifies the many sections and page layouts of HTML, making it easier to understand.

Also they consist of an opening tag, content, and closing tag like container tags. They are: <header>, <nav>, <section>, <article>, <aside>, and <footer>

`Header`

It defines a header for a web page.

A collection of introductory or navigational aids is often represented by the HTML element known as <header>. In addition to some heading components, it might also have a logo, a search form, the author's name, among other things.

<header>
    <h2>Nigeria</h2>
  </header>

`Nav`

It is the semantic element that designates a portion of a page whilst providing smooth navigation links, either within the current content or to other documents.

Tables of contents, menus, and indexes are examples of sections that can be navigated using the <nav> tag.

<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

`Section`

Chapters, headers, footers, and other sections are all defined using the <section> tag.

<section>
<a href="#">My blog</a>
<a href="#">My LinkedIn profile</a>
</section>

`Article`

It is a container element that is meant to be independently distributed within a document, page, application, or website.

This element contains the main part which has the major information about the web page.

<article class="Container tag">
  <h2>examples of container tag</h2>
</article>

`Aside`

In an HTML document, the <aside> element is majorly used to indicate the sidebar of a webpage.

<article>
  <aside>
    <p>I am a young man</p>
</aside>
  <p>More about me...</p>
</article>

`Footer`

It defines a footer for a document or a section
And the footer contains major information relating to the author and the page.

<footer>
This is a footer
</footer>

Conclusion

The coherent statement, rules, ideas and guiding principles that sets the operation behind the HTML container is that it entails opening and closing tags and have been duly explained in this article.

Like other HTML attributes and qualities,
the explained parts that span through general html tags, types of containers and the sectioning semantic tags and their uses can't be overemphasized.

In subsequent articles, I shall continue to dissect more essential attributes of web coding.

Thank you and see you soon!

Basic Web Principles - HTML And CSS Explained

Oluwasegun Olatunji — Thu, 01 Sep 2022 21:11:05 +0000

According to widely agreed tale, getting started
in tech has always been difficult, on my path I had the same experience. I was practically confused finding what to learn, starting out with courses I didn't understand its prerequisites and jostling from one online learning platform to the other.

In all, it felt like I was wasting my time until I spoke with a couple of friends and a mentor on adplist.com who told me that everything in programming revolves round the web and if I want to start off, I should start from the web.

Starting from the web apparently means learning HTML, CSS and Javascript which are the web development fundamentals. In this article, I'll explain the basic web principle, niching down HTML and CSS and how they make the web work.

Here’s a list of what we’ll cover in this article:

• The Web

• HTML

• CSS

The Web

For a basic understanding of web, it is a subset of the internet.

World Wide Web, is a portion of the Internet that consists of pages that can be accessed by a Web browser. In other words, the web is a collection of files and codes that are stored in a server that is divided into two; (web browser client and web server) and are connected to the internet.

Internet

This is a network of computers that communicate with each other to send and receive data (information), and each computer is identified by a unique number called the IP address.

IP Address

An IP address is a lengthy string of numbers linked to every device connected to a network that uses the Internet as the medium for communication.

To access a web on the internet, it loads through a browser which is known as the web client. For instance, someone sends you a link and when you click the link, your browser (web client) send a message to the website (web server) asking for the content of the link and the website's server receives the message and shows the link contents.

The client-side and server-side are referred to as the “front end” and the “back end", respectively. This whole process has to be constructed as lines of codes and that's where HTML, CSS and the whole web development process comes in.

What is HTML?

HTML stands for Hypertext Markup Language.
It was founded in 1989 and it's the first building block of a web page, core of every web page and starting point for anyone learning how to create content for the web.

How HTML works

Rather than using a programming language to perform functions, it uses a Markup language which uses tags end elements to create primary content of a web page. The browser then reads to understand the contents and purpose it serves in a webpage.

HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
</head>
<body>
<p> Hello World! </p>
</body>
</html>

To define a page, each and every HTML 5 document uses a different set of component and element.

While an HTML 5 document is made up of various elements, the following components are always present on every page:

A declaration statement at the top stating that the document is an HTML 5 document
Header
Body

The <!DOCTYPE> tag in HTML is used to specify the version of HTML that a document is utilizing. This is also described as document type declaration(DTD).
Note that unlike other HTML tag, the <!DOCTYPE> tag does not have an end tag.

<html> tag is the second tag in an HTML document, all other tags are written in it and it closes as </html> By using the opening <html> tag, the browser is informed that the page will be formatted in HTML.

The <head> tag which has its closing written as </head> expressly contain details about the body, the page's title, the labels, etc. of a web page. Only specific markup elements like meta, link, script, etc. are permitted in the HTML 5 head title.

The <body> is used to specify the primary content that will be shown on a website. Such content include: text, images, videos, links, etc.

What is CSS?

CSS stands for Cascading Style Sheet.
CSS is a stylesheet language created in late 1990s to make beautiful web designs. Adding CSS to a web page will make the web pages appear aestetically pleasing.

How CSS works

Like humans, we were created with skeleton which serves as a framework for the body, then we're covered with the skin which gives beauty and makes human beautiful

The same thing with CSS, it works as the skin that covers HTML, it is used to create background colors, layout, styling, padding and every other designs that makes a webpage smart and beautiful.

Presentation and ease of use are a couple of the main things that CSS has bought to web design by translating the way content looks on a webpage and what else goes on it to complement that content.

CSS Syntax
A selector, property, and its value are the components of a CSS Syntax. The HTML element where CSS style is applied is indicated by the selector. Semicolons are used to separate each CSS property.

selector { Property: value; }

The HTML element you want to style is indicated by the selector.
One or more declarations are contained in the declaration block and are separated by semicolons.
A comma separates the name of the CSS property from its value in each declaration.

Types of CSS

- Internal CSS

<!DOCTYPE html>
<html>
<head>

<style>
body {background-color: aliceblue;}
p    {color:yellow;}
</style>

</head>
<body>
<p>This is paragraph is set at yellow color.</p>
</body>

</html>

Internal or embedded CSS works by adding CSS codes into <style> tag in the <head>section of an HTML document.
A single page can be effectively styled with this CSS style but takes time to use this style for several pages because CSS rules must be added to each page of the website.

- External CSS

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

This type of CSS works by adding an external .css folder that contains the whole stylesheet into the <head> tag in an HTML document.

A large website can be styled more effectively using this CSS type. An entire website can be changed at once by making changes to the .css file.

- Inline CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body>
    <p style="color:yellow; font-size:40px;">Yellow</p>
  </body>
</html>

Typically, inline CSS is only used to style one type of HTML element, by adding the CSS style attribute to each HTML element.

Conclusion

The first step to understanding web programming and web development is learning and understanding HTML and CSS and the most common and extensive use of learning HTML and CSS is to code for the web. Even if programming has applications in a wide range of fields, from cybersecurity to design employment, webpages are still built using HTML and CSS, with HTML serving as the structure and CSS serving as the finishing touches.

Understanding and utilizing the alternatives provided by these two programming languages will not only put you in a strong position to build your own websites, but it will also open up numerous doors and opportunities for learning additional programming languages.

In subsequent articles I shall be dissecting structures of each language and continue to open up our minds to web development.

Thank you for reading and see you soon!

DEV Community: Oluwasegun Olatunji

Semantic HTML Explained: A Beginner-Friendly Guide to Accessibility and SEO

What Semantic HTML Actually Looks Like

The Core Elements, One by One

A Full Example

What a Screen Reader Actually Sees

Why Any of This Is Worth the Effort

Tools That Actually Check This for You

A Few Rules of Thumb

Wrapping Up

Mastering CSS Sizing: A Guide to Responsive Design

CSS Units

Absolute

Relative Units

Viewport Units

Choosing the Right Units

CSS Sizing Properties

Width and Height

Padding, Margin, and Border

Box-sizing

Background-size and Background-position

Responsive Design Techniques

Media Queries:

Flexbox

Grid Layout

Transitions and Transforms in CSS

Conclusion

Understanding Container Theory And It's Application In Web Coding

HTML Tags

Empty Tags

Container Tags

Examples of Container Tags

Types of Container Tags

Styled Container Tags

Block Container Tags

Div Tag

Span Tag

Sematic Elements

Header

Nav

Section

Article

Aside

Footer

Conclusion

Basic Web Principles - HTML And CSS Explained

The Web

Internet

IP Address

What is HTML?

How HTML works

HTML Document

What is CSS?

How CSS works

Types of CSS

- Internal CSS

- External CSS

- Inline CSS

Conclusion

`Div` Tag

`Span` Tag

`Header`

`Nav`

`Section`

`Article`

`Aside`

`Footer`