Let's get down to the fundamentals. Whether you've seen HTML or not, it may feel unclear when to use each element, or even what elements are available these days. The following should be a helpful cheatsheet for web dev beginners and markup professionals alike!
This article is a snippet from Bits of Good's web dev bootcamp. If you like what you see, head over here to view the full course (with written resources, video walkthroughs, and project activities) for free!
Starting with definitions
HTML, or Hypertext Markup Language, is a language used to define the "skeleton" of a webpage. It isn't meant to include any bells and whistles, and it definitely won't look pretty on its own! It's simply meant to define what gets shown on the page, from images to text and everything in between.
All modern browsers support the latest HTML standard: HTML5. This adds a whole host of features to improve the structuring of webpages. Namely, it adds special elements to denote the "layout" of the page, like where the navigation bar is, where the footer is, and so on. This is super useful for visually impaired individuals that rely on screen readers to browse the Internet, since it's now easier than ever to explain all the landmarks on the page right from the HTML!
Getting into syntax
When writing HTML, you will be working with something known as a tag. Basically, this is used to define some block of content you want to display on your website. There are many different tags you can use for different types of content, like blocks of text, images, headings, and so on.
For example, we can use the paragraph tag <p> to display a block of text like so:
<p>
Hard work and no play makes Jack a dull paragraph.
</p>
Note that we need to right the tag twice: once to define where its content starts and again to define where it ends. In this case, it starts before our block of text (<p>) and ends just after our text block (</p>). Note you need an added / to denote a closing tag versus an opening tag. This whole block start to finish is called an element.
Attributes
Along with declaring a tag, you can also add a set of attributes to that tag for extra information. These are written using the format attribute="value" inside the opening tag.
The class and id attributes are the most common, which will be explained better once we start using CSS. Another example is declaring the language used by your page with lang as shown below.
The main wrapper
<html lang="en-US">
<body>
<!-- More to come in here! -->
</body>
</html>
This is a basic wrapper you would always want to put around your HTML file. First, we create the base html element and specify our page's language using lang="en-US". Since anyone from Canada to Singapore may access the websites you build, it's best to specify the language so translation tools know what to expect!
Next, we add our body for all of our website's content to live. This is denoted by the body element. Also notice the <!-- … --> inside. This is how comments work in HTML, so whatever's inside those brackets won't be shown on the page.
Note: If you use CodePen, each Pen automatically adds these html and body wrappers for you around whatever code you put inside the "HTML" box, complete with the language specification. So, no need to use it on every CodePen you create, but know it's an important concept when building website outside of this tool!
Important tags
There are many HTML tags worth knowing. You can find the full list here, but these are some highlights you should know for getting started 🏃♂️
Tags for content
-
<p>A paragraph block; the most general block when you want some text on the page -
<h1>...<h6>A header block, withh1being the highest level header,h2being the second highest, and so on. A newspaper article is a solid example of this, where the article title would be anh1, each section heading would be anh2, and each subheading would be anh3 -
ul/olA block for creating a list of content. Use aulwhen you want a bulleted (u nordered) list and anolfor a numbered (o rdered) list-
li, or l ist i tem, for each element inside of the list
-
-
dlA block for creating a more complex list of content. This works a lot like aul/ol, but now each item can have a title and a description as two separate blocks. Perfect for lists that have a header / body structure-
dtThe "definition title," or the title of a list item -
ddThe "definition description," or the content of that list item Note: No need for a wrapper around these two elements. Just place theddelement below its associated titledt, and the list item should look right! If you absolutely need to, it's safe to wrap these in adivfor styling purposes.
-
-
<span>A wrapper around text within a paragraph or header. This is great for targeting certain lines or words in a text block for custom styling -
<a href="https://penguin.club">A weblink to some other website or a page within your own website. The link is specified by thehrefattribute
Note: You can force links to open in a new tab instead of the current page by including the attribute target='_blank'
-
<img src="https://cute_cat.gif" alt="gif of a cat eating ice cream" />An image, with the actual image file coming from thesrclink and thealtdescribing the image. You can read thealtwhen hovering over an image or when using a screen reader -
<button>A button you can click. You'll use JavaScript to get buttons to actually do something, but we'll leave that as a mystery for now 😁
Tags for the layout of that content
-
<header>A page header, often with the site banner and navigation bar -
<footer>A page footer, often with important links that couldn't go anywhere else -
<main>The main content area of a page. Helpful to separate from the header and footer -
<nav>The navigation bar of a webpage (aka that ribbon at the top with all the links to other pages on the site). Usually within the<header> -
<section>A sub-portion of the main content. Good for dividing up, well, sections of the page. Yes, nesting sections within sections works as well! -
<div>A general way to define a container. You'll end up reaching for these when working on page layouts, trying to position content in certain places on the page
<div> versus <section>
Generally, you'll use a <section> to group elements under common themes, like in a book report outline you'd write in high school. A <div>, meanwhile, is not used to convey this sort of separation. Take a news article as an example. We may say the article's content and the comments are two separate <section> elements. However, each comment, along with the container for like and dislike buttons, are just <div>s.
Try these elements yourself!
Hop over to codepen.io and make a new Pen. Start pasting some of the tags above into the HTML section to see what they display in the preview box!
See these tags in action
Now, let's take a look at a completed website to see how the HTML is structured. We'll be using your browser's "inspector" for this, and you can follow along by visiting the live site at https://gsg.surge.sh. I encourage you to open this tool on some of your favorite website as well to see how they structure their own markup!
Intro to HTML - inspecting how a real website is structured!
https://www.youtube.com/watch?v=I4FK_7pZJV8
Found this helpful?
Great! This article is part of a huge suite of resources used by the Bits of Good organization to teach newbies the ropes. If you want to...
💅 learn how to write better CSS with your bare hands
⚙️ get the hang of array functions in JS
📶 figure out how to talk to APIs
👩💻 build feature-rich frontends and backends using JS frameworks
🏃♂️ and most anything else in the world of web dev,
Check out the Bits of Good bootcamp! All activities, written resources, and projects are free for you to explore and share with others 😁
Access the curriculum here!
If you have any feedback, criticisms, or content suggestions, message us at hello@bitsofgood.org.
Top comments (8)
What about the html5
<video>tag? It kind of works... but it has a lot of caveats. For example: using thecontrolsattribute results in a different UI in different browsers. If thesrcis an HLS video it will work in Safari but not in Chrome, Firefox.autoplayis its own beast of unreliability. It works sometimes in chrome (if the user has a high Media Engagement Index with that particular site, otherwise it gets blocked.autoplayhas a higher probability of working (but not always) if the video also has themutedandplaysinlineattribute.Agreed, that's a pretty big HTML5 addition! But I decided not to include it for the complexities you mentioned here. It really is a ton of elements laced together "web component" style, which makes it hard to customize and control.
That said, it's definitely an element you'll use for all your embedded videos. Worth more of a Stack overflow deep dive than a bullet point here tho 😁
I'm a firm believer that the "structural" -- or as you call them in a even more horrifying manner "layout" -- tags are nonsensical trash that are at best redundant to H1..H6 and HR, or worse are presentational in nature reverting things back to the worst of 1990's development practices.
For every genuine improvement in HTML 5 -- the more compact HEAD, the absolutely awesome new form element attributes, and so forth -- there's as many if not more things that NEVER should have been added, and reek of having been made by people who never embraced any of the concepts of semantics or HTML 4 Strict.
The mere fact you used the word "layout" confirms this. Layout is presentation, and presentation has ZERO business in HTML. Take aside, where if you use it to mean "this is off to one side" that's NOT semantics, that's as presentational as the old CENTER tag! The only sense in which you would have an ASIDE that would make sense for actual literary/grammatical semantics is if you were transcribing the complete works of Shakespear or writing a slew of Deadpool/Ferris Beuller slashfic.
It's the same reasoning as to why front-end frameworks are mentally enfeebled trash, since if you don't know what's wrong with saying something like
class="uppercase tracking-wide text-sm text-indigo-600 font-bold"you might as well go back to writing HTML 3.2 using all those tags so clearly missed like FONT or attributes like ALIGN.HTML is for saying what things ARE or would be in a professionally written document for grammatical and structural reasons. HTML IS NOT for saying what you want things to look like. If you choose any of your tags, classes, id's, or much of anything else based on the tag's default appearance, you're doing it all wrong!!!
In that way the SECTION tag being redundant to how H1..H6 and even lowly HR mark the start of sections, or how MAIN is (or should be) redundant to the first H2 on the page, or how HEADER is redundant to the existing headings, or how FOOTER is redundant to an HR if it's followed by another HR or a higher order heading.... pointless redundancies CLAIMING to be semantic when they serve the exact opposite purpose.
It all seems to take a giant whiz on separation of presentation from content and efficient coding practices. It seems to be even more bent on undoing all the progress HTML 4 Strict was out to create and drag things back to the worst of 1990's era browser-wars thinking of development.
As a dearly departed friend of mine said a decade ago, the people who used to vomit up endless pointless tables for nothing now just barf out endless pointless DIV for nothing. He'd shudder in horror to see the same derpy approach being part of the specification, much less the endless pointless "markup for nothing" having a false claim of "semantics" or "structure" thrown atop it just to justify bad coding practices.
This is a weird hill to die on. 🤷
The semantic tags improve accessibility / lower the bar for building more accessible sites.
Yes, the semantic tags -- H1..H6, HR, P, UL, OL, etc, etc... But these new "structural" tags?
HEADER, FOOTER, ARTICLE, SECTION, ASIDE, MAIN, NAVare about as semantic asFONT,CENTER, or usingTABLEfor layout.The only one that might actually server a legitimate purpose from a semantic markup standpoint (aka not giving a flying fig about layout and focusing on grammar and logical document structure in a professional writing sense) is MAIN, and that's just as a hook when for some bizzaroland reason you might have other headings besides the H1 before the main content's H2.
But as always with most people having zero clue what H1..H6 and HR actually mean and failing to use them even remotely properly, it's hardly a shock such derpy markup practices are thriving -- again like the worst of browser-wars era practices.
It sounds like you have a subject for a good and interesting article.
Good work.Thanks