Part 1. HTML + CSS: A Closer Look

Helpful HTML terms and definitions

When used in concert HTML and CSS can translate your code into a user-friendly browser interface.

HTML

HTML (Hyper Text Markup Language) is the primary language used to display information in a web browser. As I’ve stated in previous posts: HTML is the language browsers speak! Here are some terms to know when navigating HTML in web development

Tags & Attributes

HTML “tags” are basic bits of information, stamps or labels on an element that communicate how that bit of code should render in a browser. Syntactically, they consist of a given keyword between <>, usually in need of a separate closing </> tag of the same keyword value. HTML “attributes” are specific words that give a certain value to an HTML element and alter its behavior. Attributes are especially helpful in manipulating the style of HTML elements with characteristics via CSS.

  • <html>

The <html> tag goes around the body of your HTML document — it’s what makes an HTML document an HTML document.

The <html> tag.
  • <ul>, <ol> and <li>

<ul> indicates an “unordered list,” or bullet-pointed list (much like this one!) and <li> tags are the list elements within that <ul> tag. <ol>is (you guessed it!) an “ordered list” element, wherein all “child” <li> tags will render numbered list elements instead of bullets.

The HTML code.
What that code renders in the browser.
  • <br>

Simply, a line break — this tag will create a space in between two elements on a page. Here it is in action, using our last <ol> example.

  • <img>

Image tags are a handy way of rendering an image file onto your web page or application. They have source attribute: “src=” can take the url of a hosted online image or a local image file from your text editor file, and display that file’s contents onto the browser. Unlike most other HTML tags, image tags can sometimes be self closing, i.e. <img src=”some-url-here.com”/>. Other sorts of attributes, like “alt” text and sizing attributes, can be added to adjust the image from the HTML file directly, i.e. <img src=”some-url-here.com” height=“200px”/>. Like so:

The browser render.
  • <a> tags or “hyperlinks”

An <a> tag is a hyperlink element, which transports a user from one page within a browser to an external page. <a> tags use an “href” attribute. Much like the “src” attribute for <img> tags, the href attribute establishes a link to the url that we want our user to navigate to when clicking said link.

  • <div>

<div> tags are elements used to separate parts of the HTML document for styling purposes, so that they can be classified accurately when being manipulated with CSS properties. <div> tags do not have any semantic purpose, meaning that they will not visible alter any text or content on the page unless altered with specific style constraints in CSS using their className attributes.

Though their importance may not seem apparent now, I will go into the use of <div> and <span> tags and CSS styling thoroughly in Part 2 of this blog. See you next week!

Helpful Resources

I used React Codesandbox for examples.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam Hall

Sam Hall

Full stack developer and stand-up comic.