9.4: Basic Attributes
- Page ID
- 51583
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
HTML attributes provide more information for tags or apply stylistic features to them that are not the default. For example, an <a> tag requires more information to know where it should link to, and a
tag can have a different font color than the default if you want it to. Let's take a look at some common attributes and what they do in Table 2 below.
| Attribute | What it does | What it looks like in HTML |
| href | The href attribute belongs to the <a> tag and defines where the link will go to. | <a href="distanceed.hss.kennesaw.edu/t...lcommunication"> This is a link to the textbook website </a> |
| src | The src attribute belongs to the <img> tag and defines where the tag will pull the image from. This can be an image site or a file path from within the server. | <img src="logo.jpg" /> |
| width | The width attribute can be applied to images, iframe elements, tables, or other elements with a numerical width. It defines how wide the item will be. | <img src="logo.jpg" width="300px" /> |
| height | The height attribute can be applied to images, iframe elements, tables, or other elements with a numerical height. It defines how tall the item will be. | <img src="logo.jpg" width="300px" heigth="300px" /> |
| style | The style attribute allows you to add inline CSS elements to your tag. A few common ones are color, font-size, font-family, and text-align. You define a style element the same way as other attributes, however you then have to define the value of the style element. View the examples to the right to see how these style elements are defined. |
<p style="color:blue;"> This is blue text. </p> <h1 style="font-size:24px;"> this is a 24pt font heading. </h1> <a hred="distanceed.hss.kennesaw.edu/t...lcommunication" style="font-family:Arial;font-size:12px;"> This link to the textbook website is Arial 12 pt font. </a> <h2 style="text-align:center;"> This heading is centered on the page. </h2> |
Table \(\PageIndex{2}\): Common HTML attributes