Within HTML documents there are certain tags that can used to change the format or structure of a document. The different tags within html documents have different properties and effect the contents within the tags differently, such as making text bold or adding a line/paragraph break after the contents of the tag. Tags can be used to add the basic layout and design of a webpage. A webpage is a single html document, or file.
Below is an example of uses a ‘p’ tag, or paragraph tag. This tag contains text that will be displayed on the webpage, this can be any text you want. The paragraph tag has an opening and closing tag, and the text is written in between these tags. This tag also adds a line break after the text, so if you put two paragraph tags next to eachother there will be a single blank line between the two paragraph tags (the line break).
<p>This my paragraph contents</p>
Similar to the paragraph tag there is also a ‘span’ tag that also have an opening and closing tag. The difference between a paragraph tag and a span tag is that the span tags do not add a line break after the element. The code snippet below shows how the span tag is written within a html file.
<span>This won't add a line break</span>
Within any document headings are used to split up content and establish boundards and areas of sub-content. There are headings tags within html that use ‘h’ tags, there are 6 different levels of ‘h’ tags (‘h1’ to ‘h6’). The numeric value dictates the level of the heading, 1 being the upper most heading. The higher the heading the bigger and bolder the heading will be. Heading tags have opening and closing tags and contain text, similar to paragraph tags.
<h1>Top level heading</h1> <h6>Lowest level heading</h6>
Even though paragraphs add line breaks to the content of a webpage you can also add line breaks manually within a webpage using a break tag. A break tag is a self-closing tag, meaning it is an opening and closing tag in one, and using the letters ‘br’. There is also another type of line break called a horizontal row tag, that adds a line break aswell as a line horizontally across the webpage, the ‘hr’ tag is a self closing tag too.
The ‘div’ tag can be used to contain other tags and seperate different parts or sections of the page. It is not the last tag available within html though. Technically, any tag can contain any other tag, you could put multiple paragraph tags within a single paragraph tag. However, it is always good to structure your documents in a clear to read format. Using ‘div’ tags to contain other tags, and elements of the page, and paragraph tags to contain text of the page makes your html documents more readable and consistent.
<div> <p>Hello</p> </div>
Create a simple ‘.html’ file and use some of these tags to understand how they work and how they look. Remember to save the file and open it in a browser to see how it looks, and save and reload the page when you make changes.