HTML for Beginners

If you've ever clicked "view page source" while browsing the Internet, you'll know that HTML can look pretty overwhelming.

kid learning to code

t's code, a mass of letters and symbols, and it can seem indecipherable. But once you start learning about HTML, you'll realize that actually, you only need to know five tags to start creating your own Web pages. Once you learn these five tags and start using them, it will be easy to remember them because they are the most commonly used HTML tags.

Editing HTML


HTML code can be created and edited using a lot of different tools. You actually don't need anything more complicated than a plain text editor on your computer, like Notepad. But a lot of people use systems that make it easier to create and post content online, such as WordPress, one of the most popular website platforms. People editing a WordPress site have a choice of two interfaces. The "Visual" tab works like Microsoft Word or other word-processing programs. Users can type text and use buttons to do things like boldface words, add bulleted lists, and add images, and the interface converts all of it into HTML. However, users can also choose to work in the "Text" tab. This tab allows users to work directly with the HTML code, so you can do more advanced things to change what will appear on the page and how it looks. Many other content management systems work like WordPress does, too, giving users the option to either create a page visually or dig into the code to make customizations.

HTML Tags


html tags

HTML code consists of tags, which are pieces of code surrounded by angle brackets (< and >). There are two different types of HTML tags: single tags and double tags. Double tags consist of an open tag and a close tag that surround the thing being affected by them, while single tags only require one little piece of code. Common tags include:

  • The paragraph tag
  • The anchor or link tag
  • The bold tag
  • The italic tag
  • Heading tags

The code for a paragraph tag is "p" within angle brackets (without the quotation marks). It's a double tag: At the beginning of each paragraph of text, you put < p >, and at the end, you put < /p > (without the extra spaces).

The link tag, also known as the anchor tag, uses "a." The most common way to use this tag is to link to another page or website. To do that, you type < a href="URL" >, put the text you want to be clickable here, and then close the link with < /a >. (Replace "URL" with the URL of the page you're linking to, but keep the quotation marks: They're part of the code.)

Want to boldface a word? You can do that by surrounding the word with < strong > and < /strong >. Making something italic is easy, too: Do the same thing, but instead of "strong," use "em" (short for "emphasis").

Heading tags are used to format the title of your page and any headings you use beneath it. The sizes of headings get smaller as the numbers get bigger: The title of the page would use "H1" tags, while the subheadings would use "H2." If one of your sections under an H2 heading has its own subheadings, those would be formatted as H3 headings, and so on. Headings are also double tags, like so:

< h1 > Heading Text Here < /h1 >

Pro Tip

Multiple tags can be used at one time, as long as they're all properly nested inside each other.

For example, maybe a piece of text needs to be bold and in italics. In this case, you'd format the text as

< strong > < em > text < /em > < /strong >

You could also do it in reverse:

< em > < strong > text < /strong > < /em >

Keep in mind

Just be sure to close the tags in the opposite order of how you opened them, and make sure that every type of tag that needs a closing tag has one.

What About CSS?


CSS is the acronym for Cascading Style Sheets. CSS is a different but related type of code, and it's used to create formatting instructions for HTML tags across an entire website. A style sheet might explain how much space should appear after each paragraph, or it might dictate what font size and color each heading should be. CSS style sheets are typically text files that end with the .css file extension.

Learn More About HTML