Part 1. HTML + CSS: A Closer Look
Helpful HTML terms and definitions
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.
The <html> tag goes around the body of your HTML document — it’s what makes an HTML document an HTML document.
- <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.
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.
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:
- <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> 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!
I used React Codesandbox for examples.
HTML attributes provide additional information about HTML elements. All HTML elements can have attributes Attributes…