While knowledge of HTML and CSS is not required to manage RJ Web Builder websites, knowing some of the basics can be a helpful skill for any website manager. HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, etc. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.
Most HTML tags have an opening and a closing tag (ex. <p></p>), but not all. The closing tag always comes after the content of the tag - it's how the browser knows that you want the tag to end. The contents of a HTML tag are the stuff that goes between the opening and closing tags - this is what we mean when we say "inside" a tag. The contents of a tag can be normal text or a mix of other tags.
Heading tags
The <h1> through <h6> tags are used to create headlines on a page, where <h1> is the most important and <h6> is the least important.
These tags are used to briefly describe the content underneath them. There may be multiples of each tag on a page, if multiple sections are of equal importance.
Paragraph tag
The <p> tag defines a paragraph of text. Browsers automatically add a margin before and after.
Line Break tag
The <br> tag is used to introduce line breaks in a paragraph. Often used inside poems and lyrics, to delineate between each line.
Note that the <br> does not have a close tag, and does not need any slash.
List tags
These tags are used to create lists. A list must start with either a <ul> if it is an unordered list (with bullets) or a <ol> if it is an ordered list (with numbers). Inside each list, every item must start with a<li> tag. Note that the items don't need to end with a closed </li> tag, but it is preferred.
Note that the list items can contain any other HTML tags, including another list (to create a "nested list").
Bold and italicize tags
The bold tag (<strong> or <b>) and italicize tag (<em> or <i>) are used for emphasizing parts of a text. The bold tag should be used to indicate strong importance, seriousness, or urgency, like to indicate key phrases in a text for someone skimming it. The italicize tag should be used to represent stress emphasis, like when you'd read the emphasized text in a different tone of voice. Both tags can be used together, where it makes sense.
Link tag
The <a> tag is used both for linking to other websites and for linking to parts of the current webpage. It has one required attribute:
| href | Where the browser should navigate to. If it should go to a new page, then this should be a URL starting with http:// or https://. If it should jump inside the current page, then it should start with a "#" and then match the id attribute of the tag to jump to (like "#main"). |
The <a> tag should contain whatever the browser should make clickable. That's often text, but it could also be an image or any collection of tags.
Image tag
The <img> tag is used to insert images into a page. It has two required attributes:
| src | The URL of the image. |
| alt | A description of the image, used by the visually impaired who use screen readers and by the browser if it can't find the image at that URL. |
It has two optional attributes for changing the size, which can also be changed with CSS. If you change the size, try not to squash or stretch the image - it's best to only specify one of them, and let the browser decide the other.
| width | The width of the image, either a number (pixels) or a percentage of the page width. |
| height | The height of the image, a number (pixels). |
Table tags
The table tag is used to format tabular data. The table tag must contain all of the child tags needed to format the data into headers, rows, and columns.
A table should start with a header row with the column names. The thead element starts the header area, the tr element creates a row, and th elements create cells in the row. A table can consist of any number of data rows after the header. The tbody tag begins the body (data) area, the same tr tag creates a row, and td tags create data cells in each row.