×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

Everything You Need to Know About HTML

Get Our Free Ultimate Guide to Coding for Beginners

Get Our Free Ultimate Guide to Coding for Beginners

Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE ebook!

HTML stands for HyperText Markup Language, a foundational coding language used for building web pages. HTML is an industry standard language that’s guaranteed to be understood by all web browsers (applications like Safari, Firefox, and Google Chrome used on computers, tablets, or smartphones to display with websites). HTML is also a universally accepted standard for making sure search engines like Google, Yahoo, and Bing can find your website based on relevant search terms (i.e.: what you type into the search bar).

In a nutshell, HTML defines the parts of web pages to web browsers that visit them. Those browsers then take a site’s HTML content and translate it into what you see on your device’s screen. Whether your website is the most sophisticated suite of slideshows, videos, and interactive forms, or it’s just one simple page of text, HTML is the language that organizes it all. Determining which part of the page is a header, which is a footer, where paragraphs belong, where images, graphics, and videos are placed—this is all handled by HTML. And that’s why HTML is one of the most fundamental building blocks needed for developing websites. It’s also why HTML is one of the first languages you should learn if you’re interested in coding.

If you’re new to tech, this might seem like a big undertaking, but don’t panic! Learning HTML is a lot more doable than you might think. The time frame for learning HTML isn’t years, and it isn’t even months: You can realistically get familiar with HTML in a matter of weeks. And—after you spend those weeks getting up to speed with HTML (and its sister language CSS, used for defining things like fonts, background colors, and page layout styles)—you’ll be in position to start doing paid work, like building a website, creating a custom email template, or working as a social media manager. At the same time, even if you aren’t looking to do developer-specific work, adding HTML to your resume can help bump up your salary at any job. However—if you want to be a full-service front-end web developer—you will eventually need to add skills like JavaScript to your repertoire, but HTML is your first stop toward a solid coding foundation.

What Does HTML Look Like?

Although you might not realize it, there’s a good chance you’ve already been exposed to HTML. If you used early personal websites like Myspace where you could customize your page with commands inside <>, you were actually using HTML code. Those bracketed commands are called HTML tags, and they’re a basic component of HTML.

For instance, you know when you visit a website and see a text headline followed by a bunch of paragraphs? The web browser you’re using can tell the difference between a paragraph and a headline because each has its own HTML tag. HTML tags look like this:

<h1>This is a headline</h1>
<p>This is a paragraph.</p>

When you use HTML tags to create something like a headline or a paragraph, you are creating “elements.” Elements are the individual HTML components that make up a HTML document or webpage, defined by those opening tags (<p>) and closing tags (</p>), as well as the information between them (This is a paragraph). A web page’s HTML elements can consist of different types of content and media, including:

In order to place any one type of media on your webpage, you have to use its particular HTML tag. For example, images get <img> tags, videos get <video> tags, and so on.

Elements can also include meta elements and structural elements. Meta elements are HTML elements that users don’t see when they’re visiting a webpage, but give web browsers additional information about the page—things like keywords, the author of the document, the time and date it was last modified, etc. These are mainly used for record keeping on the web developer’s end or for optimizing the website for search engine results, making the site more likely to appear when people Google the site’s keyword topics. Structural elements are the HTML elements used to organize the content of a web page. Structural elements like <div> and <span> are used to denote block-level content (content that takes up the full width of its “container” or page) versus inline content (content that only takes up the space between its tags), while elements like <header> contain the header content of a page, <footer> contains the footer content, etc.

Finally, attributes are instructions that can be added to HTML tags in order to provide additional information about elements. For example, an HTML element like a paragraph can have an attribute for how it’s aligned (left, center, or right). Attributes are included in the opening tag and made up of the attribute name, an equal sign, and a value in double quotes.

Example: <p = align=”right”>This is my paragraph!</p>

How Does HTML Become a Web Page?

So how does all this HTML stuff go from HTML code to becoming an actual website? It’s a surprisingly straightforward process—HTML code can be written as a plain text HTML document in any basic text editor or word processing program, after which it’s saved as an HTML file with .html at the end. No exotic hardware other than a standard computer is required. Those .html files then become the basis for a website’s individual pages and are put online as a live website through a process called web hosting. Web browsers visiting and viewing your HTML pages are able to translate the tags and text and process them into the final product on visitors’ screens.

Additional programming languages and techniques are required to achieve results beyond static web pages (features like animated graphics, interactive forms, and photo slideshows), but—no matter what—HTML is a key, foundational step in web development.

Get Our Free Ultimate Guide to Coding for Beginners

Get Our Free Ultimate Guide to Coding for Beginners

Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE ebook!

Your email address will not be published.

Cancel

23 comments

  1. Alexander Karp-Robinson Replied

    Definitely starting to get the basics of HTML with an understanding of what tags are.

  2. Jakob Cooks Replied

    i really enjoy the level of detail in this website…. theres so much information though that i find myself opening new tabs and looking up certain things in order to feel as though i have complete understanding.

  3. Anonymous Replied

    Neat! Now I understand what this is when I accidentally look at it or open it. 

  4. Devangelista Replied

    I love this, you get to actually see theory in practice! Amazing.

  5. tia0218 Replied

    This is pretty neat to see what we just learned about in action. 

  6. panlavoie Replied

    @synapse09:
    To be able to view the source code of a webpage under Safari, you first need to enable the Developer menu:
    Click on Safari menu > Preferences > Advanced.
    Check “Show Develop menu in menu bar”.
    Close the Preferences window.
    Go to the Develop menu > Show Page Source.

  7. synapse09 Replied

    How do you “View Page Source” in Safari?

  8. StephGrill Replied

    This is a really great intro to the topic of HTML. As someone who has worked with it before, but stopped for a long time, it’s a great refresher!

  9. BamTechie Replied

    This is a really interesting way to turn someone who kinda knows a bit about computers…(or so they think) into a “Techie”…a “BamTechie” as a matter of fact!!! Thanks, cuz I am dying for a career choice of some kind….and I think that thanks to skillcrush…I have finally found it!!

  10. Anonymous Replied

    i am having a hard time getting that dropdown window.. i don’t get those options :(  only back, reload page, open in dashboard..  i have a macbook air. 

  11. Walesy Replied

    Thanks owenbarton. I’m using a MAC and have Safari as well. Where did you find the developer option? I’m not having any luck with this at all.

    • prettypinklights Replied

      Hi Walesy. To enable the developer mode in safari, go up to Safari in your menu bar, select preferences, and then choose Advanced and you will see at the bottom there is a check box to enable. 

  12. EliseR Replied

    This is great but not everyone can “right click”. If you’re on a Mac and using Chrome, go to “View”, “Developing” then “View Source” or (option)+⌘+U.

    • owenbarton Replied

      I also had difficulty performing this task on a MAC. I also searched my help file for tips, but to no avail. The only thing I found was the developer option, but then when searching where it told me to go, no available option was there either. I am using Safari. 

      • Walesy Replied

        Thanks owenbarton. I’m using Safari as well. Where did you find the developer option? I’m not having any luck with this at all.

      • Walesy Replied

        Thanks owenbarton. I’m using a MAC and have Safari as well. Where did you find the developer option? I’m not having any luck with this at all.

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.