{9.1} html tags - vics.boo

HTML tags are the keywords that help your computer discern between what is HTML *code* versus what your actual content is. They exist between `< >` brackets and when you open a `<tag>`, in most circumstances, you will need to close it with `</tag>`. These tags “mark the beginning and end of an element”, per [HTML Dog]([Tags, Attributes, and Elements | HTML Dog](https://www.htmldog.com/guides/html/beginner/tags/)). So, for example, `<title>` and `</title>` are your title *tags*, but `<title>Sample Title</title>` all together is your title *element*. ## Essential Document Structure Tags --- ### `<!DOCTYPE html>` This should be the very first tag in your HTML file. It’s a document type declaration, which tells your browser what language you’re communicating in — right now, that’s HTML5. This does *not* need a closing tag. ### `<html>` and `</html>` Everything between `<html>` and `</html>` will be read by your browser *as* HTML. The entire document, besides your document declaration, should be wrapped in these two tags. ### `<head>` and `</head>` The information *about* your document — its metadata — goes between your header tags. If nothing else, this should include your document title between nested `<title>` and `</title>` tags. This is also where you’ll put information about your styling (see [[css]]). ### `<body>` and `</body>` What you put between these tags is the content that will actually be displayed on the webpage. ### Primary HTML Structure The start of your HTML page, before adding any content, should look something like this: ``` <!DOCTYPE html> <html> <head> <title>Sample Title</title> </head> <body> Here is some body text. </body> </html> ``` ## Content Formatting Tags --- ### `<h1>` through `<h6>` These tags create headers in your content, from Heading 1 to Heading 6. Each header should be wrapped in open and closing tags that correspond to the header type. That is, an H1 would be written as `<h1>Heading 1 Text</h1>` while an H3 would be written as `<h3>Heading 3 Text</h3>` and so on. ### `<p>` and `</p>` The actual space in your code doesn’t mean anything to your browser. If you just hit enter to move text to a new line, there’s nothing for your browser to read as an actual break in that content. Instead, you want to use `<p>` and `</p>` as *paragraph* tags around each section of content that should be on its own line. ### `<br>` This *line break* tag works similarly to the paragraph tags above, but is meant to put text *within the same paragraph* on a new line. In other words, your `<br>` tags will likely exist *within* your paragraph tags instead of being used to just start a new line. Note that this tag does **not** have a closing tag. ### `<em>` and `</em>` These tags are meant to add emphasis to text. This *usually*, but not always, means putting your text in italics. ### `<strong>` and `</strong>` These tags make your text bold. ### `<a href="url">` and `</a>` These tags are what you’ll use to create links in your content. Your URL or ID (see [[html attribute]]) will go in quotations, and then the text you want to *display* will go between the open and closing tags. ### Structure with Content Formatting Using all of these elements together, you’ll have a document that looks something like this: ``` <!DOCTYPE html> <html> <head> <title>Sample Title</title> </head> <body> <h1>Welcome to my blog.</h1> <p>This blog is dedicated to learning HTML, learning CSS, and building simple web pages.</p> <h2>Here's what you'll find:</h2> <p> You might find some helpful tips here like <br> how to format tags, <br> how to create your first HTML document, <br> and more. </p> <p>This blog is a <em>work in progress<em> written by a <em>beginner</em>which means some things may <strong>not</strong> be accurate. </body> </html> ```