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.



  1. Faith Mansmith Replied

    Very nice blog. I especially like content that has to do with health and wellness, so it’s refreshing to me to see what you have here. Keep it up! facial exercises

  2. eficiencia energetica electro domesticos para colorear Replied

    Le proporcionamos intervenciones en placas de cocinas vitrocerámicas, de inducción, estándar… Se realizan reparaciones en placas que ya no se fabrican y en elementos de nueva generación. No es caro adquirir asistencia profesional para la reparación de calderas de cualquier tipo, incluso las de nueva generación, como las de condensación. Ofrecemos servicios garantizados por un servicio técnico que asiste las 24 horas de los 3 5 días del año. Si desea un servicio técnico de calidad y con integrantes de verdad capacitados, contacte con nuestro equipo.

  3. Clifton Linsley Replied

    Good post and right to the point. I don’t know if this is in fact the best place to ask but do you people have any ideea where to hire some professional writers? Thank you

  4. Rupert Hoste Replied

    Hi. best wishes to you and your very nice blog”   

  5. Dreama Tapley Replied

    of the asian foods that i tastes, japanese foods and thai foods are the tastiest stuff”

  6. Clemente Abati Replied

    I’ll immediately clutch your rss as I can’t find your email subscription hyperlink or newsletter service. Do you’ve any? Please let me recognize so that I may subscribe. Thanks.

  7. historia de electrodomesticos por kwhi Replied

    Importante empresa, solicita TELEMERCADERISTA, con experiencia minima un año en telemercadeo; estudiante de carreras administrativas comerciales, Tecnico on Tecnologo en Administracion, Comercio, Mercadeo Afines. Importante empresa del sector Salud requiere Técnico en carreras Administrativas y / Contable con experiencia mínima de 1 año en solicitud y trámite de autorizaciones de servicios hospitalarios de los pacientes, diligenciar e informar a los usuarios los valores a cancelar y realizar censo de asignación de camas. Se requieren Ingeniero de Sistemas con experiencia certificada en desarrollo de software de más de 4 años.

  8. Roblox AFK Auto Typer Mac Only Replied

    Hello.This post was really interesting, particularly since I was investigating for thoughts on this topic last Tuesday.

  9. furtdso linopv Replied

    Spot on with this write-up, I actually assume this web site wants rather more consideration. I’ll most likely be once more to read far more, thanks for that info.

  10. furtdso linopv Replied

    That is very attention-grabbing, You’re an overly professional blogger. I have joined your rss feed and sit up for looking for extra of your excellent post. Also, I have shared your site in my social networks!

  11. furtdso linopv Replied

    I have been absent for some time, but now I remember why I used to love this blog. Thank you, I will try and check back more frequently. How frequently you update your website?

  12. Leslie Dirado Replied

    thanks for sharing this information.have shared this link with others keep posting such information..

  13. Coletta Eben Replied

    Thanks for sharing this information..have shared this link with others keep posting such information..

  14. Gugu Hlophe Replied

    Mind opening, I starting to see the light , HTML is core to web developing

  15. Alexander Karp-Robinson Replied

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

  16. 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.

  17. Anonymous Replied

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

  18. Devangelista Replied

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

  19. tia0218 Replied

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

  20. panlavoie Replied

    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.

  21. synapse09 Replied

    How do you “View Page Source” in Safari?

  22. 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!

  23. 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!!

  24. 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. 

  25. 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. 

  26. 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.