Last Updated on August 11, 2024 by E. Scott
HTML Coding is the most fundamental building block of the web. Every web based…whatever…uses HTML. Regardless of the website, app, landing page, or even email—they all use HTML. Hypertext Markup Language is vastly popular and heavily reliant. However, there’s still a lot of people who don’t know how to use it. Don’t feel bad! I’ve crossed paths with MIT grads and business owners who write incorrect and unsustainable HTML.
Though I’m not going to teach you everything about HTML here, I’ve included some of the most popular search queries. Some or all of which you’ll hopefully find very helpful.
Regardless, knowing HTML in 2024 can help you with work regardless of the industry. I’ve used it in social media, blog posts, and a wide variety of tasks totally unrelated to my career as a developer.
Table of Contents
What is HTML Tags/ HTML Coding?
HTML is the language of the web. As mentioned above, it’s literally on every web page, device, and platform. Succinctly, HTML coding enables the page skeleton. It’s how the page comes to life and evolves into a visually appealing UX — user experience. People working with HTML will undoubtedly encounter an array of industry jargon. UI and UX are just two of them.
User Interfaces are fully rendered, completed pages. UI’s often contain some type of dashboard though. Things with charts, fly out menus, data analytics, and the like.
UI’s can also be rudimentary pages, but in my experience, they are more robust designs vs that of a basic page. UX is how all of the HTML comes together. This may also be called information architecture. It’s how easy, or difficult it is for users to do what they’re trying to accomplish. None of these tasks would be feasible without HTML coding.
HTML is responsible for the columns, before a user would recognize them as such. CSS is used in conjunction with HTML to add colors, spacing, alignment, and positioning. Just like every web page contains HTML, every page also contains CSS. They’re a pair.
Comment in HTML?
A comment in HTML is used for a developer to provide a brief explanation of something. In HTML coding, the author may make a reference to something for a user. Perhaps it’s a comment to another developer. Or something used in a testing environment. Every language actually has comments for the same reason. Not just HTML. I use comments in most things I write so if I return to a project months later, I have a base line understanding of why something was written the way it was.
Comments are used heavily in development and testing phases of virtually every web application. They’re written by people of all calibers. Not just senior developers, but teachers, and everyone else involved in HTML coding.
Table in HTML?
Tables in HTML come in all shapes and sizes.
- Tables built in React
- Tables built in Angular
- Tables built in Vue
- Tables built in Svelte
- Tables with expandable rows
- Data driven tables with horizontal scrolling
Tables however built without a framework or library such as Bootstrap still require in depth knowledge of HTML, CSS, and JavaScript. It’s not possible to create a functioning table solely with HTML coding. The features however are literally endless. There can be search and sorting, pagination, or contain expandable rows just to name a few. Moreover, the data may emanate from a local JSON file, a database, or customer input. Tables are very flexible and can be made to fit any need imaginable.
Using the table tags however is often times not the best choice as they’re largely inflexible and a nuisance to work with. In turn, conventional div tags might be used in conjunction with span tags powered by modern CSS such as flex-box or a grid layout.
I created this example that possesses a number of said features. Notice the combination of HTML coding, CSS, and JavaScript in addition to the JSON data feed. The JSON is intended to replicate an API source as typically local JSON files are for development purposes only. Or, they serve as a placeholder while the API is built.
This table on the other hand is powered by Angular and uses a pagination package. App.component.html is possibly the most succinct table in HTML with JSON and pagination. This is the power and advantage of using a UI framework. App.component.ts obtains the data and dictates the blueprint of the data, known as an interface (cars.interface.ts).
This React Data table uses JSX. It incorporates both HTML coding and JavaScript. In Table.jsx, notice the HTML starting on line 96. The syntax is entirely different than conventional HTML. As mentioned above, there’s endless ways to build a table.
In this scenario, the error component (Error.jsx) loads when there’s an error. The header component is constant. The loader loads accordingly, and the app component holds the entire table. Main renders said resources.
What is iFrame in HTML Coding?
An iFrame is a way to nest one page inside of another. I don’t use them too often anymore, but I know they’re still used and probably will continue regardless of how the web evolves. Companies such as Stackblitz and Codepen use iFrames to render their work environments.
Once the outer frame and tools, etc are loaded, an iFrame loads the project. In this case they’re probably used to load the environment required to work with the chosen technology.
iFrame’s are not just used for loading work environments though. They’re used in blogs, image galleries, and a variety of places. The premise is the same however. iFrames load external content. Be it an image or video gallery, analytics, or whatever.
There are however limitations integrated for security. For instance, no one can load content protected via a login portal. To get a high level intro about one type of login practice, check out this post.
So don’t expect to get access to authorized websites via an iFrame. iFrame’s have special use cases. Otherwise, avoid using them, as there’s often better ways to load external data and content.
HTML Header
HTML headers are used in both literal and figurative ways. Headers are referred to as such because there’s an actual tag solely dedicated to thereof. The header tag is ideal for accessibility and ideal for semantic markup.
Accessibility is a key element as it’ll impact SEO on both mobile and desktop. Build an entire website without accessibility in mind and search will undoubtedly penalize you. The internet is supposed to be for everyone, including those with impairments. In turn, web content needs to accommodate those needs. Accessibility support is then used to assist screen readers.
Semantic markup is important as it greatly helps other developers understand what’s happening in the code. Even if you’re not working on a team, returning to writing code after months of being away from the project can be difficult. For no other reason than you forgot the meaning or structure of a page. Using semantic markup circumvents this hindrance as it becomes easier to differentiate between blocks of code.
The antithesis is opening a page of code only to find everything’s a div tag. This is maddening because another developer will most likely take the time to revise the code. In turn, small fixes become much longer than necessary. Whether you’re writing rudimentary HTML code or building a full stack application, writing sustainable code is wise for numerous reasons.
To develop or improve your full stack knowledge, read through this full stack post.
Headers are also used as a term vs a tag. Someone may refer to the top section of a website as the header. One in which may be comprised of a slider and navigation. Neither of which are wrapped in header tags.
Tags in HTML Coding
There’s a wide variety of tags in HTML. The div tag is the most fundamental which is often used to delineate blocks of code. Supposed we have an input field with a label, button and an icon. All these elements may be wrapped in a div tag.
The nav tag is used to specify a top level navigation. Whether it’s a horizontal or vertical navbar, or a mobile navigational system. The nav tag would be used in these situations. Read this post to learn how navigation works in a powerful UI framework such as React or Angular.
The footer tag is another semantic tag to use when necessary. Wrap links, div tags, or whatever is necessary to delineate the footer code block as such.
- Use ‘a’ tags for links.
- Button tags for buttons.
- Input tags with the appropriate type for user inputs such as text or email.
- Enclose paragraphs in ‘p’ tags.
- Avoid the style tag, used for testing purposes or in trivial applications. Otherwise, CSS should be external vs in the HTML page.
- Incorporate the section tag to decipher makeshift chapters or actual sections in a document.
There’s an innumerable amount of other tags, but there’s definitely ones which are predominantly used over others. The important thing is to use them appropriately and as often as possible. This ensures both sustainability, accessibility, and overall code quality.
Video Tag in HTML
Video tag in HTML coding is undoubtedly used for video. If you’re looking for audio support, check out the audio tag. When creating videos, I’ll always use any one of a variety of conversion tools to acquire alternate formats to cover full browser support.
Working with video is akin to many other tags. The content can be static or dynamic. Depends on your use case. This example shows a video gallery using the video tag. The values are updated on click. Making a gallery or a single video responsive can be a little tricky as it’s largely reliant on outside markup and styling.
Using the video tag in conjunction with a UI framework of course opens a massive toolbox. Many years back I created a single page app which is still kinda neat over seven years later. Check out the project here, namely the video section. Or see the code in pages > home.html.
What is a DIV Tag in HTML Coding
Divs in HTML are often used to wrap blocks of code. These blocks are then positioned in the main layout.
When we begin using semantically correct markup such as header, footer, a tags, button tags, section, and the appropriate ‘h’ level tags, divs make more sense. It’s a bit of an outlier. Use the aforementioned tags for their intended purpose, then enclose them in a div.
The obstacle is working on teams. In my experience, some developers will often make incorrect use of tags. This will often elongate simple processes and impede things such as SEO and accessibility.
It’s very important to structure our HTML pages succinctly and correctly because search is changing. And I don’t think anyone knows exactly how. A variety of AI powered tools have come to fruition in recent years. Things such as Perplexity which is said to rival Google search. This new trend may eliminate the need for users to actually visit pages. In turn, sites’ only chance of being seen may be via resource links in auto generated summaries. If a page or website has poor markup, it’ll most likely decrease chances of being used as a resource link.
HTML Font Color
Font color is defined via the color rule (color: blue, color: #333, or color: var(—someColor)). Moreover, color can be defined via inline styling (<div style=“color: blue”>…</div>).
This last method should only be used in specific use cases as inline styling is a poor practice. If there’s inline styles scattered throughout the markup, they’re overwriting classes in a style sheet. It’s indicative of an unsustainable methodology. Whatever the language, code should always be sustainable.
If you’re using a UI framework, not just color, but all styles will be applied accordingly. React has ways of applying thereof as does Angular and Vue.
HTML Tab
HTML tabs are quite common. They’re used in finder windows on Macs. They’re a popular feature in Microsoft Teams Chat. I noticed tabs the other day on the Department of Motor Vehicles’ website. They’re a clean way of organizing desktop or tablet content. Mobile should convert to an accordion in my opinion.
In this basic tabs example, section tags denote the tab content with the help of JavaScript. Notice the movement of the ‘active’ class. It’s being dynamically applied.
Tabs are so common I have built them using React, Angular, and native HTML. And I’m sure other developers are doing the same. Granted in 2024, we could quickly use tabs from a CSS library such as Bootstrap or Material UI, but I frown on those systems. Because… typically we need full control over the UI. The appearance and functionality.
Using said resources is difficult because in order to customize thereof code becomes bloated with classes and attributes. That’s why I typically prefer building my own components. They’re often times easier to maintain in the event of a UI mock and developers only need to know CSS vs Tailwind, Material, etc.
Checkbox in HTML Coding
Checkboxes are one of those inflexible elements in my opinion. However, this page does a great job at styling them. Check it out.
This is one of the rare cases where I deflect accessibility. So shame on me. I digress.
When the mock calls for a larger check or a unique use case, I use a div. Style it how I see fit, then overlay the icon. I can now use an HTML entity, custom icon, or whatever. Data tables with expandable rows are a good example. One where you want the check to extend beyond the box.
CSS in HTML
CSS in HTML Coding is applied either via inline, in the style tag, loaded externally, or dynamically. Inline is a poor practice for many reasons. If you experience it in a team environment, ensure you raise the flag. It’s unwieldy and unsustainable. Use it for testing or for dynamic styling.
Loaded externally it’ll emanate from a relative style sheet or a CDN. Both methods will cache but minimization is of the utmost importance. Styles can be lengthy, so eliminating spaces and k-size is beneficial.
Use the style tags for small apps where it’s ok to throw everything inside one file. Such as in the case of TypeScript where we’d incorporate the template, styling, and functionality all in one. Or just a native HTML page without a lot of code.
Whatever the case, load libraries accordingly. Implement a structure such as alphabetizing, BEM (block, element, and modifier), nested Sass, or through namespaces in cases such as components.
This example illustrates external CSS. Here’s other misc CSS examples:
Add Image in HTML
Adding an image in HTML coding is done so via the image tag. This self closing tag contains the source url of the image which can certainly be dynamic. Or static. It’s used for PNG, Gif, and JPG in my experience. Do not use the image tag for a PDF.
Always use the alt attribute for accessibility. Assign the width and height attributes either in the CSS or with the tag itself. Whenever I use an image tag I always wrap it in a div, then assign it 100% width. Height will scale automatically. In turn the image will scale to the size of the parent.
Otherwise, I find it to be inflexible when used on its own. In UI frameworks like React you’ll find a number of ways to modify thereof. The same thing is always possible without a framework.
If you’re not sure how to do something via native HTML, CSS, and JavaScript, never use a UI helper tool to fill the void. There’s definitely use cases where frameworks are overkill for the task at hand.
Dropdown in HTML
Dropdown menus in HTML coding can be a nuisance. Using things such as select and option or even checkboxes can be very inflexible. If you fully understand HTML and CSS with vanilla JavaScript, this should not be difficult.
Otherwise, take a look at this dropdown menu. The menu is added and removed from the DOM entirely. Open the console to see it in action.
If you’re not sure how to build this, do not use a library such as Bootstrap simply for components. Do not ever use libs for one feature. It’s simply not worth the bandwidth.
If this doesn’t work for you, another option is sliding the menu up and down absolutely. The drawback here is anyone could show and hide the menu in the Dev Tools.
Email Template in HTML
It’s been a very long time since I’ve built an email template. But, I doubt it’s changed. Email development is probably one of the few things that never seems to advance.
Yes, of course you could use a templating system. But that’s not always an option. It’s done via tables. Child tables, parent tables, grandparent tables, and great grandparent tables. Modern CSS is not supported.
I forgot the exact reason, but it’s something to do with email clients and how they work universally. They’re not akin to browsers. They are stubborn technologies that make email development far more tedious than necessary.
HTML Button with Link
Buttons can be built using the button tag. They can be made statically or generated dynamically. This set of buttons is my all time favorite. Check out how the buttons hover above the fold.
An easy way to create a button with a link is to wrap an a tag around the button. Use the button tag for accessibility and semantically correct markup. If possible though, attach a click event to the button vs using the ‘a’ tag. Get the button via JavaScript or add an onclick attribute.
Background Image in HTML
Background images in HTML coding can be both frustrating and very useful. I used to use them frequently, but not so much anymore as I build lots of dynamic UI dashboards now. Regardless, here’s an HTML template utilizing thereof. And here’s samples of background images in an isolated environment:
HTML Background Image
If and when you do use background images, ensure they’re optimized for the web as much as possible. I use Image Compressor to reduce the file size for up to 70% without noticeable loss of quality.
Moreover, depending on how many images are being used, think about implementing a loading architecture. The array on line 131 holds the data, then the image URLs are fetched via Promise.all. This manner allows for adding a loading icon to each image.
And though the world has gone haywire over ChatGPT, and developers are getting uncomfortable with AI coding abilities, I don’t know if it or any of the AI solutions will implement solutions like this. With a good understanding of frontend technologies such as HTML, CSS, and JavaScript, we can build sustainable UIs. Most likely better than automated software.
HTML Template
HTML templates are everywhere. Finding the right one is tedious. Knowing how they work is beneficial because they’ll more than likely require changes. This recent template I built could be the home page for a portfolio.
The image URLs are all fetched asynchronously and appended to the page. Loading icons could be used here if you’re looking for additional features. The navigation is responsive and becomes fixed on mobile. Moreover, the mobile navigation closes on page scroll or resizing the window. So, if a user rotates their phone with the nav open, it’ll close.
Columns and the grid system are all custom and can be easily modified. The JavaScript contains an abundance of comments so you can see exactly what each block is doing. Most of it is for the dropdown menu on desktop. If you’re looking for minor changes to this one, let me in the comments below and I’ll try to assist.
Leave a Reply